Element表单验证规则

一、简单的逻辑验证使用方法：

方法步骤：

1、在html中给el-form增加 :rules="rules"

2、html中在el-form-item 中增加属性 prop="名称"

3、js中直接在data中定义rules:{}

在html中的写法：

<el-form ref="formData" :rules="rules" :model="formData" label-width="500px">
     <el-form-item label="用户名：" prop="userName">
          <el-input class="inp" v-model="form.userName" auto-complete="on">el-input>
          <el-button type="primary" class="btn-add" @click="onSubmit('formData')">提交el-button>
      el-form-item>
el-form>

js中：

<script>
export default {
  data() {
    return {
      formData: {
        userName: '',
      },
      // 校验规则
      rules: {
        userName: [
        { 
          required: true, //是否必填
          message: '用户名不能为空', //规则提示
          trigger: 'blur'  //何事件触发
        },
        //可以设置多重验证标准
        { 
           min: 3, 
           max: 5,  
           message: '长度在 3 到 5 个字符'
         },
        {
            pattern: /^[\u4E00-\u9FA5]+$/,  //正则
            message: '用户名只能为中文'
         }
         ]
      }
    }
  }
}
script>    

 

二、自定义验证逻辑：

步骤：

1、在js中找到data中的rules，然后在对应的名称中设置 validator: 验证器名称；

2、在js的data中的return之上书写验证器对应的js验证逻辑，如：

 

三、表单提交

methods: {
   onSubmit(formName) {
     this.$refs[formName].validate(valid => {
        if (valid) {
             //如果通过验证 to do...
        } else {
          console.log('error submit!!')
          return false
        }
    })
 }

 

　　

 

转载于:https://www.cnblogs.com/PYiP/p/10155472.html