Vue2.x --element-ui表单验证、$nextTick()

element-ui表单验证

表单基本结构
el-form 包含 el-form-item

//template
//el-form要动态绑定model,如果需要验证规则,还要动态绑定rules
<el-form :model="user" :rules="loginRules" ref="loginForm">
		//el-form-item 如果要验证,需要用prop来绑定
        <el-form-item prop="mobile">
          <el-input placeholder="请输入手机号" v-model="user.mobile"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="user.password"></el-input>
        </el-form-item>
</el-form>

//script
data(){
 return {
 	user: {
        mobile: '',
        password: ''
      },
 	}
}

• 设定规则

//el-form中动态绑定的rules中设定
//参数:required-是否必填,message-错误提示信息,pattern-正则,trigger-触发条件
//prop绑定的属性名,传入的规则是数组包对象,不同的验证条件要分开写
loginRules:{
	 mobile: [{
          required: true,
          message: '请填写手机号',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '请输入正确手机号',
          trigger: 'blur'
        }],
     password: [{
          required: true,
          message: '请填密码',
          trigger: 'blur'
        }]
}

• 自定义规则

定义一个方法函数,函数有三个参数(rule, value, callback) ,rule是定义的规则,value是验证的值,callback是回调函数,如果判断错误,需要callback(new Error())回调一个错误提示,然后在绑定的rules中,使用validator接收

data () {
    const validatePassword = function (rule, value, callback) {
      value.length >= 3 ? callback() : callback(new Error('密码长度不小于3位'))
    }
    return {
	loginRules:{
     password: [{
          required: true,
          message: '请填密码',
          trigger: 'blur'
        },
        //接收自定义的规则
        {validator: validatePassword, trigger: 'blur'}]
	}

• 表单统一验证
  1.用ref拿到整个el-form
  2.用validate方法传入处理函数执行处理,执行函数第一个参数拿到的是布尔值,如果表单中的规则都通过,则会返回true

//template
<el-form :model="user" :rules="loginRules" ref="loginForm">

//methods
login(){
	this.$refs.loginForm.validate(function(isOK){
		if(isOK){
			console.log('填写信息均符合要求')
		}
	})
}

$nextTick()

如果代码需要Dom渲染完毕再执行,处理用定时器异步执行外,可以用$nextTick来执行
例子:原本隐藏的文本框弹出后自动获取焦点,如果弹出和获取焦点写在同一个执行函数,则获取焦点会失效

methods:{
	showInput(){
		this.inputArea = true, //文本框显示
		//元素渲染后执行
		this.$nextTick(()=>{
			this.$refs.inputArea.focus()
		})
	}
}