基本步骤-共三步（element-ui表格正则校验)
-
定义验证规则。data()格式定义规则
-
应用规则(三置)应用于模板上的属性配置
给表单设置 rules 属性传入验证规则 给表单设置model表单数据的属性传输 给表单项（Form-Item ）设置 prop 属性，其值设置为需要验证的字段名
- 手动兜底验证
详细说明:
步骤1-定义表格验证规则，固定格式
练习demo的正则:
注意： ● rules属性名必须与表单数据项中的属性名一致。
步骤2-模板中的配置
内容：
- 给 el-form 组件绑定 model 表单数据对象
- 给 el-form 组件绑定 rules 属性配置验证规则
- 表单项需要验证 el-form-item 绑定 prop 属性。
注意：prop 指定表单对象中的数据名称的属性 ,不需要动态绑定。
我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。
步骤3-手动口袋验证
element固定格式:
说明：
● validate 该方法由表单组件自带，用于检查表单内容。
● 表单组件的引用需要添加到模板中：ref 手动触发验证主要用于获取表单组件
示例代码
<template> <div style="width:800px"> <h1>表单</h1> <el-form ref="form" :rules="rules" :model="form" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' }, // 定义规则 rules: { "username": [ {required: true, message: 请输入用户名， trigger: 'blur'} ], "password":[ { required: true, message: 请输入密码， trigger: 'blur' }, { min: 6, max: 8, message: 长度为6-8位， trigger: 'blur' }, { validator(_, value, callback){ // rule：采用的规则 // value: 被校验的值 // callback是回调函数， // 若通过规则检验，就直接调用callback() // 未通过规则检验的，调用callback(对象错误，说明错误对象中的原因) // 例如：callback(new Error(错误说明) if(value === '123456'){ callback(new Error(123456不能使用密码) } else{ callback() } // console.log(rule, value, callback) }, trigger:"blur" } ] } } }, methods: { onSubmit() { // 手动兜底校验 console.log(this.$refs.form) // this.$refs.form.validate表单将自动验证一次 // valid验证结果将自动接收 this.$refs.form.validate(valid => { console.log(valid) // valid: true，false // 为false: 表格上会有提示信息 // 如果是true,可以进一步发ajax做登录 }) } } } </script>