Form 表单校验的使用

目标
掌握element-ui中表单校验的使用
基本步骤-共三步

  1. 定义验证规则。data()中按格式定义规则
  2. 在模板上做属性配置来应用规则(三个配置)
    给表单设置 rules 属性传入验证规则
    给表单设置model属性传入表单数据
    给表单项(Form-Item )设置 prop 属性,其值为设置为需校验的字段名
  3. 手动兜底验证
步骤1-定义表单验证规则
在 data 中,补充定义规则。
格式:
data() { return { rules: { // 字段名1:表示要验证的属性 // 值: 表示验证规则列表。它是一个数组,数组中的每一项表示一条规则。 //数组中的多条规则会按顺序进行 字段名1: [ { 验证规则1 }, { 验证规则2 }, ], 字段名2: [ { 验证规则1 }, { 验证规则2 }, ], } } }

示例
{ 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' } ] } } },

注意:
  • rules中的属性名与表单数据项中的属性名必须是一致的。
步骤2-模板中的配置
内容:
  1. 给 el-form 组件绑定 model 为表单数据对象
  2. 给 el-form 组件绑定 rules 属性配置验证规则
  3. 给需要验证的表单项 el-form-item 绑定 prop 属性,注意:prop 属性需要指定表单对象中的数据名称
代码:
立即创建 取消

验收效果
我们做到这一步时,当用户输入的内容不符合表单规则要求时,并且某个输入框失焦时,它会给出相应的提示,当我们输入的内容符合要求时,错误提示会自动消失。
步骤3-手动兜底验证
格式
element-ui的表单组件.validate(valid => { if(valid) { // 通过了验证 } else { // 验证失败 } })

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

添加ref来引用el-form组件。
代码
在做提交时进行手动兜底验证,如果通过了验证
doLogin () { alert('我可以做登录了') }, submit () { this.$refs.form.validate(valid => { // valid 就是表单验证的结果,如果是true,表示通过了 // console.log(valid) if (valid) { // 通过了验证,你可以做后续动作了 this.doLogin() } }) }

总结: 步骤
  1. 定义验证规则(按element-ui的要求来)
  2. 配置模板,应用规则
    给表单设置 rules 属性传入验证规
    给表单设置model属性传入表单数据
    给表单中的元素(Form-Item )设置 prop 属性,其值为设置为需校验的字段名
  3. 手动兜底验证
自定义检验规则的使用格式 场景:
密码不允许是123456
目标
掌握自定义检验规则的使用格式
思路
【Form 表单校验的使用】在rules中自定义validator
格式
rules:{ 属性名1: [ { // 注意参数顺序 validator: function (rule, value, callback) { // rule:采用的规则 // value: 被校验的值 // callback是回调函数, //如果通过了规则检验,就直接调用callback() //如果没有通过规则检验,就调用callback(错误对象,在错误对象中说明原因) //例如:callback(new Error('错误说明')) }, trigger: 'blur' }] }

落地代码
rules: { name: [{required: true, message:'必须要填入', triggle: 'blur'}], code: [ { validator:(rule, value, callback)=>{ console.log(rule, value, callback) if(value =https://www.it610.com/article/=='123456') { callback(new Error('这是世界上最差的密码了')) } else { callback() } }, triggle: 'blur' }, {min: 6, max:8, message:'长度为6-8位', triggle: 'blur'}, {required: true, message:'必须要填入', triggle: 'blur'}, ] }

    推荐阅读