Vue Element表单绑定（三）表单验证2

2019独角兽企业重金招聘Python工程师标准>>>

一、表单验证，常见类型

详细说明：https://github.com/yiminghe/async-validator

Type

Indicates the type of validator to use. Recognised type values are:

• string: Must be of type string. This is the default type.
• number: Must be of type number.
• boolean: Must be of type boolean.
• method: Must be of type function.
• regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
• integer: Must be of type number and an integer.
• float: Must be of type number and a floating point number.
• array: Must be an array as determined by Array.isArray.
• object: Must be of type object and not Array.isArray.
• enum: Value must exist in the enum.
• date: Value must be valid as determined by Date
• url: Must be of type url.
• hex: Must be of type hex.
• email: Must be of type email.

更多代码示例：https://my.oschina.net/tianma3798/blog/3010171

二、自定义验证规则、异步验证

验证使用:rules 定义js验证处理，或者单独指定某一项的：rules配置处理。

<template>
  <div>
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="ruleForm2.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass"></el-input>
      </el-form-item>
      <el-form-item
        label="年龄"
        prop="age"
        :rules="[
        {required:true,message:'年龄不能空'},
        {type:'number',message:'请输入数字',trigger:'blur'}
        ]"
      >
        <el-input type="age" v-model.number="ruleForm2.age"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

js示例代码：

export default {
  data() {
    //定义验证规则
    var checkUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户不能空"));
      }
      //延迟验证
      //   setTimeout(() => {
      //     if (!Number.isInteger(value)) {
      //       callback(new Error("不能纯数字"));
      //     } else {
      //       callback();
      //     }
      //   }, 1000);
      //异步验证
      $.get(
        "http://api.gongjuji.net/download/addrecord?type=1&content=uploader6.0%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD",
        function(data) {
          console.info(data);
          if (!data) {
            callback("用户名不正确");
          } else {
            callback();
          }
        }
      );
    };
    //验证码确认验证码处理
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {},
      rules2: {
        username: [
          { required: true, validator: checkUserName, trigger: "blur" }
        ],
        pass: [{ required: true, validator: validatePass,trigger:'blur' }],
        checkPass: [{ required: true, validator: validatePass2 }]
      }
    };
  },
  methods: {
    //提交验证
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert(JSON.stringify(this.ruleForm2));
        } else {
          return false;
        }
      });
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFileds();
    }
  }
};

 

更多：

Vue Element表单绑定（二）表单验证1

Vue Element表单绑定（一）

Vue 动态加载组件方式整理

转载于:https://my.oschina.net/tianma3798/blog/3010425