前端表单在提交前总是要进行校验的，而这些工作是繁琐的，所以这儿写了一个简单的校验框架，代码实现如下：
function Validate(id){
if(arguments.length != 1){
throw new Error("Argument is required");
}
this.errors = [];
this.id = id;
this.container = $("#" + id);
}
Validate.prototype = {
constructor : Validate,
rules : [
"required"
],
rulesCallback : {
messages : {
required: ‘The %s field is required.‘
},
required : function(control){
var value = control.value;
if ((control.type === "checkbox") || (control.type === "radio")) {
var controls = $("input[name=‘" + control.name + "‘]");
for(var i=0; i<controls.length; i++){
if(controls[i].checked === true){
return "";
}
}
}
else if(value && value.length > 0){
return "";
}
return this.messages.required.replace("%s", control.name);
}
},
validate : function(){
this.errors.clear();
var controls = this.container.find(".validate");
if(controls != null){
for(var i=0; i<controls.length; i++){
for(var j=0; j<this.rules.length; j++){
if(controls.hasClass(this.rules[j])){
var error = this.rulesCallback[this.rules[j]](controls[i]);
if(error.length > 0){
this.errors.push(error);
}
}
}
}
}
return this.errors.length == 0 ? true:false;
}
}
现在这儿只是实现了required的校验，如果要添加其他校验可以按照如下步骤
rules : [
"required"
],
rulesCallback : {
messages : {
required: ‘The %s field is required.‘
},
required : function(control){
var value = control.value;
if ((control.type === "checkbox") || (control.type === "radio")) {
var controls = $("input[name=‘" + control.name + "‘]");
for(var i=0; i<controls.length; i++){
if(controls[i].checked === true){
return "";
}
}
}
else if(value && value.length > 0){
return "";
}
return this.messages.required.replace("%s", control.name);
}
},
1. 首先在rules中添加校验的类型；
2. 在rulesCallback的message中添加校验错误时的提示文本，其中%s是占位符，会使用表单元素的name值来替换。提示文本的名字要和校验类型相同；
3. 在rulesCallback中添加一个和校验类型相同的方法，并在方法中完成对某一控件的校验实现；
通过以上步骤就添加好了校验规则，然后看一下使用，代码如下：
<!DOCTYPE>
<html>
<head>
<title>demo</title>
</head>
<body>
<div id="form">
alias<input class="validate required" name="alias" type="text"/><br/>
Content<input class="validate required" name="content" type="text" /><br/>
public<input class="validate required" name="publiz" type="radio" />Private
<input class="validate required" name="publiz" type="radio" />Public<br/>
<button id="btnOK">OK</button>
</div>
<script src="jquery-3.2.1.js"></script>
<script src="validate.js"></script>
<script>
$(function(){
var val = new Validate("form");
$("#btnOK").click(function(){
val.validate();
alert(val.errors);
});
});
</script>
</body>
</html>
因为该框架实在jquery下工作的，所以先要导入jquery库，然后根据包含表单控件的元素的id属性来创建一个校验对象，这样就可以在后面使用，如上在点击ok按钮后开始进行校验，通过val.valdate()方法返回是否是false，就可以知道是否有表单元素的值不合法，如果有不合法的可以通过val.errors来获得提示语句。
其他规则的校验会在后面添加。
原文地址：https://www.cnblogs.com/lvniao/p/9591444.html
时间： 2024-10-12 02:44:45