这个js脚本只是提供一个通用的验证框架,具体的验证规则,以及不能通过验证的时候所产生的动作完全可以定制。
首先,给需要验证的表单(Form)中的需要加入验证器的input控件加入一定的验证规则,这个例子中是通过给Input控件加入一个自定义的属性来实现的,如下例:
<script src="validate.js" ></script>
<style>
input.invalid{background: #faa;}
input.valid{background: #afa;}
</style>
<form>
name : <input type="text" name="name" required><br>
email: <input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$"><br>
zipcode : <input type="text" name="zipcode" pattern="^\s*\d{5}\s*$"><br>
unvalidate : <input type="text"><br>
<input type="submit" value="submit query">
</form>
当你看到required或者pattern时,不要慨叹自己才疏学浅,因为这两个属性是自定义的。从而实现了js脚本跟html的分离。下面是这个牛B的JavaScript脚本:
(
function(){
if(window.addEventListener) window.addEventListener("load", init, false);
else if(window.attachEvent) window.attachEvent("onload", init);
function init(){
for(var i = 0;i < document.forms.length;i++){
var f = document.forms[i];
var needsValidation = false;
for(var j = 0;j < f.elements.length; j++){
var e = f.elements[j];
if(e.type != "text") continue;
var pattern = e.getAttribute("pattern");
var required = e.getAttribute("required") != null;
if(required && !pattern){
pattern = "\\S";
e.setAttribute("pattern", pattern);
}
if(pattern){
e.onchange = validateOnChange;
needsValidation = true;
}
}
if(needsValidation) f.onsubmit = validateOnSubmit;
}
}
function validateOnChange(){
var textfield = this;
var pattern = textfield.getAttribute("pattern");
var value = this.value;
if(value.search(pattern) == -1) textfield.className = "invalid";
else textfield.className = "valid";
}
function validateOnSubmit(){
var invalid = false;
for(var i = 0; i < this.elements.length;i++){
var e = this.elements[i];
if(e.type == "text" && e.onchange == validateOnChange){
e.onchange();
if(e.className == "invalid") invalid = true;
}
}
if(invalid){
alert( "The form is incompletely or incorrectly filled out.\n"+
"Please correct the hightlighted fields and try again.");
return false;
}
}
}
)();
主题的思想是这样,先定义合法和非法时需要做的动作(在这个例子中,只是简单的将input框的背景色改变而已,这个可以通过CSS轻易实现,你也可以弹出警告等来提示用户),然后,当框中的内容改变时,就尝试去匹配这个input定义的模式(如果有的话),如果不匹配,就以一定的方式来提醒用户。
整个验证器的思路非常清晰,代码也很简洁,主要是通过自定义规则可以完成任意的验证方式。
分享到:
相关推荐
验证器-Js 受 Laravel 框架验证器启发的 Javascript 验证器表单用其他语言阅读本文:、如果您习惯于 Laravel 框架的表单验证器,那么这个用 javascript 编写的库可能对您感兴趣。 基本上,我试图将 Laravel ...
在使用 JavaScript验证器。 产品特点 保存文件时自动进行验证,并按需进行验证。 使用ESLint --fix命令自动修复错误。 错误和警告显示在TextMate装订线中。 (可选)获得报告,列出错误和警告,并提供指向的相关...
JavaScript验证器/修饰符可在现代浏览器和Node.js中使用。 API一目了然 要求 var Modifier = require ( 'modifier' ) ; // in Node.js 使其为整数 var num = Modifier . integer ( "10.3" ) ; console . assert ...
JavaScript验证用户登录 JavaScript验证用户登录 JavaScript验证用户登录
javascript特效 客户端验证javascript特效 客户端验证javascript特效 客户端验证
动态公用javaScript验证 动态公用javaScript验证 动态公用javaScript验证
用户注册页面代码javascript验证,主要是讲用户注册界面的设计。
比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行...
ACCP5.0 JavaScript客户端验证和页面特效制作(JavaScript)
javascript 验证框架,能够对javascript进行很好的验证
javascript之validate验证脚本
javascript注册验证实例 javascript注册验证实例 javascript注册验证实例 javascript注册验证实例
JavaScript验证函数大全JavaScript验证函数大全JavaScript验证函数大全
JavaScript验证表单大全 JavaScript验证表单大全 JavaScript验证表单大全
用JavaScript实现的邮箱格式验证
一个简单的带有javascript验证的注册页面
JavaScript表单验证 JavaScript表单验证 JavaScript表单验证
javascript表单项验证器三方库.zip