1、表单验证,常见类型javascript
详细说明:https://github.com/yiminghe/async-validatorhtml
Indicates the type
of validator to use. Recognised type values are:java
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/3010171git
2、自定义验证规则、异步验证github
验证使用:rules 定义js验证处理,或者单独指定某一项的:rules配置处理。api
<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(); } } };
更多:async