vue2后台管理项目表单校验的规则

1、什么是表单校验：

如：登录模块中的需要输入账号、密码登，因此我们要输入正确的账号密码格式等就叫  ----表单校验

2、参考文档element ui  form表单   ，在el-form-item 必须要写上prop="name"    ， 在el-input必须写上 v-model="ruleForm.name"   ，ruleForm是在el-form中写的model属性。

 model属性：整个表单数据     rules属性：定义校验规则对象  

<el-form :model="ruleForm" :rules="rules">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '','
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      };
    },
  }
</script>

3、实际项目中表单校验规则，

A、html部分 

一定不要忘记写prop、v-model

<el-form :model="loginForm" :rules="loginRules">
          <el-form-item label="账号" prop="mobile">
            <el-input v-model="loginForm.mobile" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">请勾选用户协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">登录</el-button>
          </el-form-item>
        </el-form>

B、js部分

 data() {
    return {
      // 收集表单数据
      loginForm: {
        'mobile': '',
        'password': '',
        isAgree: false
      },
      // 校验规则对象
      loginRules: {
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '请输入6-18位密码', trigger: 'blur' }
        ],
      }
    }
  }

###勾选协议复选框

注意要使用自定义校验器

isAgree: [
          {
            // 自定义校验器
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请勾选用户协议'))
              } else {
                callback()
              }
            },
            trigger: 'change'// 复选框状态改变的时候进行校验
          }
        ]

4、校验效果

不输入账号、密码和勾选复选框时：

错误校验：

输入账号、密码和勾选复选框时，但是没有按着写的校验规则

正确校验

####注意仅供参考，根据项目需求完成功能