详解小程序之简单登录注册表单验证

  

这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下。

  

效果图,wxs的内容较简单,自己编写即可。

  

详解小程序之简单登录注册表单验证

  

# #主要内容

  

一,首先我是在util.js中引入表单正则验证规则,给予login.js来引用

        函数regexConfig () {   var reg={   用户标识:/^ [A-Za-z0-9] +美元/,//邮箱正则验证   电话:/^ 1 (3 | 4 | 5 | 7 | 8)\ d{9} $///手机号正则验证   卡:/^ [\ u4e00 - \ u9fa5]{2,4} $///姓名汉字正则验证   }   返回注册;   }      模块。出口={   formatTime: formatTime,   regexConfig: regexConfig   }   之前      

验证结果

  

详解小程序之简单登录注册表单验证

  

二,在login.index中写一个表形式单,内容自己可以随意规定,

        & lt;形式bindsubmit=癴ormSubmit”比;   & lt;视图类=笆淙肭北?   & lt;视图类=癷nput-log”比;   & lt;图像类=" userinfo-logIcon " src=" https://www.yisu.com/zixun/{{logIcon}}”祝辞& lt;/image>   & lt;输入id="用户名" name="用户名"最大长度=' 4 '类型=拔谋尽闭嘉环?靶铡泵?比;   & lt;/view>   & lt;视图类=癷nput-log”比;   & lt;图像类=" userinfo-logIcon " src=" https://www.yisu.com/zixun/{{pwdIcon}}”祝辞& lt;/image>   & lt;输入id="密码" name="密码" type="数量"最大长度=笆弧闭嘉环?笆只拧?比;   & lt;/view>   & lt;/view>   & lt;视图类=癰tn-area”比;   & lt;按钮开口=袄蔳etUserInfo”=皕h_CN”bindgetuserinfo=皁nGotUserInfo”禁用="{{禁用}}" formType=加载“提交”=皗{btnLoading}}”比;{{loginBtnTxt}} & lt;/button>   & lt;/view>   & lt;/form>   & lt;文本类=凹记伞狈绺?"祝辞注意:只有在职人员方可登录& lt;/text>   之前      

这里,姓名一栏通常是算作8个字符,但是我测试后实际应为2 - 4字符,姓占位1 - 2字符,名占位1 - 2字符。不排除异类情况,如果是邮箱则不需要规定“最大长度的数值。

  

手机号一栏必须规定长度,否则别人会随便填写错误手机号,当然这也是为了简单验证,严格来说是要给填写的手机号发送验证码来验证的,那需要收费,个人依情况而定。
  提交表单【formType=疤峤弧薄俊?/p>   

三,登录。js内容
  

        var util=要求(“. ./. ./跑龙套/util.js”);   var myMessage=" ";   页面({   数据:{   loginBtnTxt:“登录”,   myMessage:“”,   loginBtnBgBgColor:“# 0099 ff”,   btnLoading:假的,   禁用:假的,   inputUserName:”,   inputPassword:”,   avatarUrl:“. ./. ./图片/logo.jpg”,   logIcon:“. ./. ./图片/logIcon.png”,   pwdIcon:“. ./. ./图片/pwdIcon.png”,   curNav: 1、   curIndex: 0   },      alt="详解小程序之简单登录注册表单验证">

  

在这里进行引用验证,

  

xxx var=util.regexConfig ()。xxx,这里的第二个xxx是你自己命名的变量,姓名或者邮箱或者手机号进行对应选择你在跑龙套。js中的变量命名。第一个xxx是你当前要引用的变量名
  成功后的提示

  

, 详解小程序之简单登录注册表单验证

  

以上所述是小编给大家介绍的小程序之简单登录注册表单验证详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

详解小程序之简单登录注册表单验证