校验--登录，验证码等

1、登录

       handleLogin() {
            if (!this.loginForm.phone) {
                this.errorTip = '请输入手机号码'
            } else {
                 if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.loginForm.phone))) {
                   this.errorTip = '请输入正确的手机号码'
                  } else {
                    if (!this.loginForm.password) {
                        this.errorTip = '请输入密码'
                    } else {
                        this.errTip=''
                        this.loading = true;//校验没有错误开启加载
                        this.loginForm.phone = this.loginForm.phone.trim();
                        this.loginForm.password = this.loginForm.password.trim();
                        //记录登录状态
                        this.loginForm.remember = Number(this.loginForm.remember)//一定为数字或者NAN

                        //store在main.js定义，触发loginin请求
                        this.$store.dispatch('loginIn', qs.stringify(this.loginForm)).then((res) => {
                            if (res == 0) {
                                // 成功跳转首页
                                this.$router.push({ path: '/resend/home' })
                            }
                            this.loading = false
                        }).catch(() => {
                            this.loading = false
                        })
                    }
                // } 
            }
        }

2、验证码

• 实现方法一

//html部分
<el-input type="text" placeholder="请输入验证码" id="i-code" class='input input-default input-208' v-model='forgetForm.code'></el-input>      
<el-button  class='get-code' @click.native.prevent='getCode' :disabled="noGetCode">{{codeText}}</el-button>

// 点击获取验证码
getCode: function() {
	if (!this.forgetForm.phone) {
		alert('请输入手机号')
		return false
	} else {
		// 请求从服务器获取验证码
		this.$store.dispatch('getVerificationCode',
		qs.stringify({phone: this.forgetForm.phone, class_id: 2}))
		  .then((res)=> {
			//成功返回状态
			if (res == 0) {
				// 更改获取验证码按钮信息 倒计时
				var that = this;
				var time=60;
				var timer = setInterval(function() {
					time--;
					// 通过codeText更改
					that.codeText = time + "秒";
					that.noGetCode = true;//禁用验证码
					//结束清除定时器，更改按钮信息并更改为禁用状态
					if (time == 0) {
						time = 60;
						clearInterval(timer);
						that.codeText = "获取验证码";
						that.noGetCode = false
					}
				}, 1000);
			}
			// 关闭加载
			this.loading = false
		}).catch(() => {
			this.loading = false
		})
	}
}

• 实现方法二

//html部分
<view class="forget u-f-ajc login-font-color yanzhengma" @tap=getCode>
   <view class="u-f-ajc" :class="{'disabled': timecode > 0}">{{!timecode ? textcodetip : timecode + 's'}}</view>
</view>

               getCode() {
   			if (!this.checkPhone()) {
   				return
   			}
   			if (this.timecode > 0) {
   				uni.showToast({
   					title: '请稍等',
   					icon: 'loading'
   				})
   				return;
   			}
   			// 请求服务器，发送验证，成功开始倒计时
   			this.timecode = 3;
   			let timer = setInterval(() => {
   				this.timecode--;
   				if (this.timecode <= 0) {
   					clearInterval(timer);
   					// 赋值严谨
   					this.timecode = 0;
   					this.textcodetip = "再次获取"
   				}
   			}, 1000)

   		}

3、element-ui校验

data(){  
// 验证输入密码
   	var newPassValid = (rule, value, callback) => {
   		if (value === '') {
   			callback(new Error('请输入密码'))
   		} else if (value.length < 6 || value.length > 20) {
   			callback(new Error('密码长度须为6-20'))
   		} else {
   			callback()
   		}
   	}
    
     return {
     // 手动修改密码校验
   	changePassRule: {
   	   newPass: [{ validator: newPassValid, trigger: 'blur' }]
   	},
     }
 }