ElementUI - form表单检验基础使用

前言

我们在日常开发中，向后端发请求调用接口之前，需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。

场景 

• 内容不能为空

• 密码长度必须多少位

• 手机号的格式要合规

• 邮箱的格式要合规

1.基本步骤

1.1 data中定义验证规则

data() {
  return {
    form: {
        字段名1:'',
        字段名2:''
      },
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
         // trigger: 什么时候触发验证 
         { required: true, message: '请输入手机号', trigger: 'blur' },
         // pattern : 正则
         { pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
        ], 
		}
  }
}

1.2 在模板是做属性配置来应用规则

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

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

给表单项（form-item）设置prop属性，其值为需要校验的字段名

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="字段名1">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="字段名2">
    <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>

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

1.3 手动兜底校验

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

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

代码：

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

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

2.自定义验证规则

格式：

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

代码： 

  data() {
    const validCode = (rule, value, callback) => {
      const CodeList = this.originList.map(item => item.code)
      console.log('CodeList', CodeList)
      // 检查value 是否存在其中
      CodeList.includes(value)
        ? callback(new Error('编码' + value + '已经存在'))
        : callback()
    }


    return {
      form: {
        code: '', // 部门编码
      },
      rules: {
        code: [
          { required: true, message: '部门编号不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '编号长度必须为1-50个字符', trigger: 'blur' },
          { validator: validCode, trigger: 'blur' }
        ]
      }
    }
  },

• 自定义规则格式是固定的
• callback必须调用

3.重置表单清空校验痕迹

this.$refs.form组件的引用.resetFields()

作用：

1.清理校验痕迹

2.回复表单默认数据