element-ui form表单检验规则

要求：

1. 用户名必须为11位手机号 (/^1[0-9]{10}$/)
2. 密码为必填且长度6到8位字符

步骤:

1. 定义验证规则

2. 配置模板，应用规则

   给表单设置 rules 属性传入验证规则

   给表单设置model属性传入表单数据

   给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

3. 手动兜底验证

步骤一:

在data中补充自定义规则

格式 :

rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        // 数组中的多条规则会按顺序进行
        // 格式： 键：要验证的字段, 值是一个数组，每一项就是一条规则
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
}

示例代码:

code: [
  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
]

实际操作代码:

data () {
    return {
      rules: {
        // 字段名：mobile就表示要验证的 属性
        // 值: 是一个数组。数组中的每一项表示一条规则。
        mobile: [
           		// 是否必填           提示信息             失去焦点提示
            { required: true, message: '请输入手机号', trigger: 'blur' },
            	//正则表达式
            { pattern: /^1[345678]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
        ],
        code: [
          { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
        ]
      }
    }
  },

注意:

• rules中的属性名与el-form表单数据项中的属性名必须一致.

步骤2-模板中的配置

内容：

1. 给 el-form 组件绑定 model 为表单数据对象

2. 给 el-form 组件绑定 rules 属性配置验证规则

3. 给需要验证的表单项 el-form-item 绑定 prop 属性

   注意：再次强调

   请务必确保如下：三个地方的属性名一样
   表单元素上的 prop值 ， 表单数据中的属性名，rules中的属性名

代码:

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

输入正确时:

步骤3-手动兜底验证

上面的效果只是在界面上给出提示，但是， 它并不能阻止我们去做提交。所以还需要在做提交操作时，手动调用表单组件的验证方法。

格式:

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
		 // 验证失败
	}
})

• validate 方法是表单组件自带的，用来对表单内容进行检验。
• 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

模板:

<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

在el-form添加 ref 属性获取当前节点,给元素或组件注册引用信息

代码:

在事件中使用**$refs**进行接收注册在对象上

submit () {
      this.$refs.form.validate(valid => {
        // valid 就是表单验证的结果，如果是true，表示通过了
        // console.log(valid)
        if (valid) {
           // 通过了验证，你可以做后续动作了
        }
      })
    }

清理校验痕迹

校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。

// 这个方法可以
// 1. 清理校验痕迹
// 2. 恢复表单默认数据
this.$refs.form.resetFields() 

自定义检验

目标:

输入的密码不允许是 123456

格式:

rules:{
  	
    属性名1: [
      { 
        validator: function (rule, value, callback) {
      	// rule：采用的规则
        // value: 被校验的值
        // callback是回调， 
        // 如果通过了规则检验，就直接调用callback()
        // 如果没有通过规则检验，就直接调用callback(错误对象，在错误对象中说明原因)
        // callback()
        // callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }]
}

实际操作:

rules: {
  code: [           
            {required: true, min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' },
            {               
                validator:function(rule,value,back){
                    if(value==='123456'){
                         back(new Error("密码太简单") )
                    }else{
                       back()
                    }
                },
                trigger:'blur'
            }  
          ]
}

使用自定义规则更加灵活,因为他的语法是固定的