javascript实现自动验证表单的代码分享
1,js代码部分
<script>
/**
* 自动验证表单
* edit by www.jiaochengji.com
*/
(function(){
if(window.addEventListener) window.addEventListener("load",init,false);
else if(window.attachEvent) window.attachEvent("onload",inint);
function init()
{
for (var i=0;i<document.forms.length ;i++ )//页面中所有表单
{
var f=document.forms[i];
var needValidate = 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);
}
else{
e.onchange=validateOnChange;
needValidate=true;
}
}
}
if(needValidate) 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 ("呵呵,有错误,请认真核对");
return false;
}
}
})();
<script>
2,在页面中调用:
<script language="javascript" src="validate.js"></script>
<!--form表单-->
<form>
name:<input type="text" name="name" required><br>
email:<input type="text" name="email" pattern="^s*\w+@\w+\.\w+\s*$"><br>
<input type="submit" value="submit">
</form>
您可能感兴趣的文章:
php验证码大全(实例分享)
php彩色验证码的简单例子
php验证码的三个实例代码分享
php点击验证码实时刷新的实现代码
常用js验证代码大全(Email、手机号码、身份证号码、文件类型等)
php5验证码类(简易实用型)
表单验证插件 jQuery formValidator
php图片验证码的例子
php验证码简单函数代码(附效果图)
php各种验证码与Ajax验证的实例分享