elemeng-ui中表单如何校验

首先下载与引入element-ui：

下载：npm i element-ui -S

引入：在main.js中引入（有全局引入和按需引入，详情参考官方网站）

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
//全局引入elemnt-ui

规则校验：

ElementUI封装了组件el-form来收集、校验和提交数据，其中的:rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。

代码示例：

        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"       //ref 给el-form起的引用名称 
          label-width="70px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
          </el-form-item>
        </el-form>

      // 添加表单验证规则  :rules
      addFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "用户名的长度在2～10个字",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "用户密码的长度在6～18个字",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },

 

    // ----在data下return外---------------------------
    // 自定义表单
    // 邮箱正则        规则，待校验值，回调函数
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/;
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback();
      }
      callback(new Error("请输入合法邮箱"));
    };
    // 手机正则
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1[34578]\d{9}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      // 返回一个错误提示
      callback(new Error("请输入合法的手机号码"));
    };

自定义规则调用

ElementUI提供的表单验证规则是有限的，可能无法满足我们项目的需求这时候就需要我们来自定义验证规则。我们在在data() {}中添加自定义的校验规则，然后在在data的return中通过validator引用校验规则。data() {return{}}中定义的rules要 中的 :rules 属性值相同，rules中的对象userName要与与 中的prop属性值相同。

自定义校验规则

validate是ElementUI封装用于对整个表单进行验证的，参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。这个回调函数的原型为：function fun(rule, value, callback, source, options){}，其中rule指向当前的规则对象，value是需要进行校验的值，callback是验证之后的执行回调，source是跟value的值一致的键值对象（可以忽略），options是个额外的配置选项（可选）。所以常见的函数定义如下，校验手机号码是否正确。