element表单验证

91 阅读1分钟

el-form 组件:model="ruleForm" ruleForm是data中定义的存储的是用户名和密码值的对象 通过model传给el-form组件 :rules="rules" rules是data中定义的对象目的是校验用户名和密码的规则 ref="ruleForm" 咱们可以通过ref来获取el-form组件内部的方法 比如:validate校验方法 resetFields重置方法 status-icon 是在表单校验错误的时候 输入框中出现的提示小图标 label-width="200px" 是用来控制用户名和密码文本的宽度

 <el-form :model="ruleForm"  status-icon :rules="rules" ref="ruleForm" label-width="100px">

label 控制输入框的文本 prop="username" 是对应表单域model中的username字段规则的名字需要和表单域model中的字段一模一样

  <el-form-item label="用户名" prop="username">

v-model 里面对应的是data中的数据

 <el-input v-model="ruleForm.username"></el-input>

autocomplete="off" 作用是把输入框的自动提示功能关闭

  <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>

提交的时候把ref里面的名字传过去,目的是为了使用refs方法来调用el-form里面的validate校验方法

<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

重置的时候把ref里面的名字传过去,目的是为了使用refs方法来调用el-form里面的resetFields重置方法

  <el-button @click="resetForm('ruleForm')">重置</el-button>

简易的表单验证方法

data() {
      var checkUser = (rule, value, callback) => {
        console.log('用户名:',value)
        if(value.trim()==''){
            callback(new Error('请输入用户名'));
        }
        else if(!/^[0-9a-zA-Z_\u4e00-\u9fa5]{5,10}$/.test(value)){
            callback(new Error('用户名为5-10位中英文数字或者下划线'));
        }
        else{
            callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        console.log('密码:',value)
        if (value.trim()=='') {
          callback(new Error('请输入密码'));
        }else{
          callback();
        }
      };
       return {
        ruleForm: {
          password: '',
          username: ''
        },
        rules: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          username: [
            { validator: checkUser, trigger: 'blur' }
          ]
        }
      };
    },

提交和重置的方法:

    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          /* el-form组件的validate方法 在回调函数中
          如果valid为true 则表示表单校验通过
          为false则表示不通过 */
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        /* 通过vue中的$refs方法来调用组件el-form中的resetFields方法 实现重置 */
        this.$refs[formName].resetFields();
      }
    }