最近写了无数各种形式的表单，记录下奇奇怪怪的校验规则~
一：首先是element自带的rules校验规则：
element作为常用框架，自带rules属性简单易懂，官方文档一目了然，不再赘述，应付常用校验足够了，
相对麻烦的是自定义的校验函数，举个例子：
html部分：
<el-form id="form"
:rules="rules"
:inline="true"
:model="form"
size="medium"
ref="form"
label-position="right"
label-width="136px"
validate-on-rule-change
class="postForm" autocomplete="off" inline-message>
<el-form-item prop="phone">
<el-input v-model="form.phone" name="phone" id="phone" size="medium" required>
</el-input>
</el-form-item>
<el-form-item prop="money">
<el-input v-model="form.money" name="money" id="money" size="medium" required>
</el-input>
</el-form-item>
</el-form>
下面是js部分：
rules:{
phone: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator:function(rule,value,callback){
if(/^1[34578]\d{9}$/.test(value) == false&&/^\d{4}-?\d{4}$/.test(value) == false){
callback(new Error("请输入正确的手机号或电话号码"));
}else{
callback();
}
}, trigger: 'blur'
}],
money: [
{required: true, message: '请输入金额', trigger: 'change'},
{ validator:function(rule,value,callback){
let num=Number(me.numRep)+Number(me.meetingForm.numWork)
if(/^\d+(\.\d{1,6})?$/.test(value) == false){
callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));
}else if(Number(value) >num*550/10000){
callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));
}else{
callback();
}
}, trigger: 'blur'
}]
}
formValidate(formName){
this.$refs[formName].validate((valid) => {
if(valid) {
this.validateForm=true;
}else{
this.$message.warning("请确认输入信息无误！");
this.validateForm=false;
}
});
return this.validateForm;
},
二：接下来也是比较常用的，jQuery+easyUI 的表单校验：
依旧直接上例子：
html部分：
<form id="formA" class="postForm" autocomplete="off">
<table role="table" class="desigerTable" data-usage="基本信息录入" id="t5" cellpadding="10" cellspacing="10">
<tbody>
<tr>
<td class="targetarea droppable">
<div data-type="1">
<div class="form-group">
<label class="col-sm-4 control-label">总天数</label>
</div>
</div>
</td>
<td class="targetarea droppable">
<div data-type="1" class="wrapper">
<div class="form-group">
<input class="form-control" placeholder="" id="days"
name="days" type="text">
</div>
</div>
</td>
<td class="targetarea droppable">
<div data-type="1">
<div class="form-group">
<label class="col-sm-4 control-label">总人数</label>
</div>
</div>
</td>
<td class="targetarea droppable" colspan="2">
<div data-type="1" class="wrapper">
<div class="form-group">
<input class="form-control" placeholder="" id="person"
name="person" type="text">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
/**
* 校验主表单
*/
var formValidate = function () {
//表单验证规则
$("#formA").validate({
ignore: "",
rules: {
days: {required: false,number: true,checkDur:true},
person: {required: false,number: true,checkPerson:true},
},
messages: {
days: {
number: "请输入数字",
checkDays:"*总天数不超过2天，可输入小数，0.5，1，1.5！"
},
person: {
number: "请输入数字",
checkPerson:"*请输入正整数！"
},
},
//是否在获取焦点时验证
onfocusout:false,
//是否在敲击键盘时验证
onkeyup:false,
//提交表单后，（第一个）未通过验证的表单获得焦点
focusInvalid:true,
//当未通过验证的元素获得焦点时，移除错误提示
focusCleanup:true,
});
$.validator.addMethod("checkDays",function(value,element){
if(value == 0.5||value == 1||value == 1.5||value == 2){
return this.optional(element)||true
}
},"*总天数不超过2天，可输入小数，0.5，1.5！");
$.validator.addMethod("checkPerson",function(value,element){
var me = /(^[1-9]\d*$)/;
return this.optional(element)||(me.test(value));
},"*请输入正整数！");
/**
* 校验方法调用
*/
var dataValidate = function (data) {
if (!$("#formA").valid()) {
Util.alert("请输入正确的数据！");
return false;
}
return data;
};
三：原生js form表单校验：
原生js校验可直接调用onclick，onfocus，onblur，onkeyup等事件来实现
（ps：原生真的永远的神，没有什么是原生js做不到的，如果做不到，就是我太菜了，继续滚去学原生。。）
继续简单明了举例子：
html部分：
<form action="example.html" method="post" enctype="multipart/form-data" class="register">
<div>
<label for="idCode">身份证号</label>
<input type="text" id="idCode" class="idCode" name="idCode" placeholder="身份证号"/>
</div>
<div>
<label for="passwd">密码</label>
<input type="passwd" name="passwd" id="passwd" class="passwd" placeholder="密码"/>
</div>
</form>
onload = function () {
blurElement();
submitForm();
}
//元素失去焦点时校验
function blurElement() {
//验证姓名
document.getElementById("ame").onblur = function () {
vailidateName();
};
//表单提交函数
function submitForm() {
let form = document.getElementsByClassName("register")[0];
form.onsubmit = function (e) {
let flag =vailidateName()& vailidatePasswd()& vailidateID();
return flag == 1 ? true : false;
};
}
//验证身份证号码 18位
function vailidateID() {
let id = document.getElementById("idCode");
let span = next(id);
let value = id.value;
//判断空
if (value == "") {
span.innerHTML = "身份证号码不能为空";
span.style.color = "red";
return false;
}
//判断长度
if (value.length != 18) {
span.innerHTML = "身份证号码长度18位";
span.style.color = "red";
return false;
}
//判断前17位数字
let reg = /^\d{17}$/;
let str = value.substring(0, 17);
if (!reg.test(str)) {
span.innerHTML = "身份证号码前17位必须是数字";
span.style.color = "red";
return false;
}
//验证密码:6-12位非空，必须包含大写字符，字母开头
function vailidatePasswd() {
let passwd = document.getElementById("passwd");
let span = next(passwd);
let value = passwd.value;
let code = /^[a-zA-Z]$/;
//非空
if (value == "") {
span.innerHTML = "密码不能为空";
span.style.color = "red";
return false;
}
}
ok，结束，以上就是最近写的典型的前端校验表单例子，还在跟需求battle新的校验。。下一篇是更让人吐血的动态校验。。。
博客
1361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
