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

原创

tianma3798 2021-11-23 17:21:34 ©著作权

文章标签 Vue.js Element 表单用户名重置 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者tianma3798的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、表单验证，常见类型

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.

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

验证使用: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();
    }
  }
};