一つの検査formデータの合法性のjsクラス
5701 ワード
この文章のオリジナル作品は転載する場合、ソースを明記してください[email protected]
いくつかの他の人のコードを参考にして、自分でformデータの合法性を検査するjs種類を書きました.
使い方
いくつかの他の人のコードを参考にして、自分でformデータの合法性を検査するjs種類を書きました.
function ValidForm(formObj){
function validateOnChange(){
var textfield = this;
var pattern = textfield.getAttribute("pattern").toString();
var plen = pattern.length;
// alert(plen);
pattern = pattern.replace(/\//g,'');
// alert(pattern);
var value = this.value;
// alert(pattern+' '+value+' '+ value.search(pattern));
var required = textfield.getAttribute("required") != null;
if (!required && value.length==0){
textfield.className = "valid";
return;
}
if(value.search(pattern) == -1)
textfield.className = "invalid";
else
textfield.className = "valid";
};
this.form = formObj;
this.defaultRegExp = {
email : /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
cnPhone : /^(\d{3,4}-)\d{7,8}(-\d{1,6})?$/,
cnMobile : /^1[3,5]\d{9}$/,
yid : /^[a-z][a-z_0-9]{3,}(@yahoo\.cn)?$/,
date : /^\d{4}\-[01]?\d\-[0-3]?\d$|^[01]\d\/[0-3]\d\/\d{4}$|^\d{4} [01]?\d [0-3]?\d[ ]$/,
integer : /^[1-9][0-9]*$/,
number : /^[+-]?[1-9][0-9]*(\.[0-9]+)?([eE][+-][1-9][0-9]*)?$|^[+-]?0?\.[0-9]+([eE][+-][1-9][0-9]*)?$|^0$/,
currency : /^\d*(.\d{1,2})?$|^0$/,
alpha : /^[a-zA-Z]+$/,
alphaNum : /^[a-zA-Z0-9_]+$/,
urls : /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/,
chinese : /^[\u2E80-\uFE4F]+$/,
postal : /^[0-9]{6}$/
};
this.bind = function(){
var needsValidation = false;
for(var j = 0;j < formObj.elements.length; j++){
var e = formObj.elements[j];
if(e.type != "text") continue;
var pattern = this.defaultRegExp[e.getAttribute("pattern")];
if (!pattern) pattern = e.getAttribute("pattern");
e.setAttribute("pattern", 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) formObj.onsubmit = validateOnSubmit;
};
this.doValid = function(){
var invalid = false;
for(var i = 0; i < formObj.elements.length;i++){
var e = formObj.elements[i];
if(e.type == "text" && e.onchange == validateOnChange){
e.onchange();
if(e.className == "invalid")
{
invalid = true;
var tips = e.getAttribute("tips");
if (!tips) tips = " ";
alert(' ：' + tips);
return false;
}
}
}
return true;
};
}
使い方
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head>
<body>
<script src="validate_obj.js" ></script>
<style>
input.invalid{background: #faa;}
input.valid{background: #afa;}
</style>
<form id="form1" name="form1">
name : <input type="text" name="name" required tips=" "><br>
email: <input type="text" name="email" pattern="email" tips=" :[email protected]"><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>
<script language="javascript">
var vf = new ValidForm(document.getElementById('form1'));
vf.bind();
</script>
<input type="button" value=" " onClick="alert(vf.doValid());"/>
</body>
</html>