javascript学习实践－－新手上路－

javascript学习实践－－新手上路－－验证表单

这几天学习javascript，就只在看书，都没怎么实践，
今天工作的时候要检验表单数据，属性Ｎ多，以前做的时候是对每个属性都写四五句话来判断，类似
function checkData(){
   if(document.forms[0].username==""){
      alert("请输入用户名");
      document.forms[0].username.focus();
      return false;
   }
   return true;
}
关于这种验证的实用性暂且不谈，现在一般的验证早已不用这个了。
只是为了在工作中偷偷懒，写了个方便点的CheckUtil，如下

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>验证</title> <script type="text/javascript"> var CheckUtil = new Object(); var checkutil = CheckUtil; CheckUtil.status = true;//状态，用来标志是否有不合格验证 CheckUtil.checks = new Array();//用来存储需要验证的对象参数 CheckUtil.definedchecks = new Array();//用来存储自定义验证 CheckUtil.errors = new Array();//用来存储输出错误信息 CheckUtil.firstErrObj = null;//用来存储第一个出错对象，设置焦点 //////////////////////各种验证类型///////////////////////////// CheckUtil.REQUIRED = /\S/; //非空 CheckUtil.INT = /^-?\d+$/; //整数 CheckUtil.FLOAT = /^(-?\d+)(\.\d+)?$/; //浮点数 CheckUtil.USERNAME = /^[a-zA-Z]{1}(\w){4,19}$/; //用户名 CheckUtil.EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //电子邮箱 CheckUtil.TEL = /^(($\d{3}$)(\d{3}\-))?($0\d{2,3}$0\d{2,3}-)?[1-9]\d{6,7}$/; //电话号码 CheckUtil.MOBILEPHONE = /^(($\d{3}$)(\d{3}\-))?13\d{9}$/; //手机 CheckUtil.NUM = /^\d+$/; //数字 CheckUtil.CARDID = /^\d{15}(\d{2}[A-Za-z0-9])?$/; //身份证号 CheckUtil.POSTCODE = /^[1-9]\d{5}$/; //邮编 CheckUtil.DATE1 = /^(?:19\d{2}|20\d{2})-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12][0-9]|3[01])$/ //日期，形如yyyy-mm-dd /////////////////////////////////////////////////////////////////////// /** *初始化 */ CheckUtil.init = function(){ CheckUtil.status = true; CheckUtil.checks = new Array(); CheckUtil.definedchecks = new Array(); CheckUtil.errors = new Array(); CheckUtil.firstErrObj = null; } /** *添加验证对象及参数 *@param obj 需验证表单对象 *@param checktype 需验证类型 *@param errmessage 验证失败时提示信息 */ CheckUtil.addCheck = function(obj,checktype,errmessage){ var check_obj = new checkObj(obj,checktype,errmessage); CheckUtil.checks.push(check_obj); } /** *添加自定义验证 *@param expression 需验证表达式，为真时返回错误信息 *@param errmessage 验证失败时提示信息 */ CheckUtil.addDefinedCheck = function(expression,errmessage){ var check_obj = new definedcheckObj(expression,errmessage); CheckUtil.definedchecks.push(check_obj); } /** *验证对象 */ function checkObj(obj,checktype,errmessage){ this.obj = obj; this.value = obj.value; this.checktype = checktype; this.errmessage = errmessage; } /** *自定义验证对象 */ function definedcheckObj(expression,errmessage){ this.expression = expression; this.errmessage = errmessage; } /** *执行验证并提示信息，并返回验证状态 */ CheckUtil.execute = function(){ checkChecks(); checkDefinedChecks(); showError(); return CheckUtil.status; } /** *检验对象 */ function checkChecks(){ for(var i=0;i<checkutil.checks.length;i++){ var check_obj = CheckUtil.checks[i]; if(check_obj.checktype==CheckUtil.REQUIRED){//判断是否是必填 if(!check_obj.checktype.test(check_obj.value)){ CheckUtil.status = false; if(!CheckUtil.firstErrObj){ CheckUtil.firstErrObj = check_obj.obj; } CheckUtil.errors.push(check_obj.errmessage); } }else{//不是必填的话，看有没有填入值，填了就检查，没填也是可行的 if(CheckUtil.REQUIRED.test(check_obj.value)){ if(!check_obj.checktype.test(check_obj.value)){ CheckUtil.status = false; if(!CheckUtil.firstErrObj){ CheckUtil.firstErrObj = check_obj.obj; } CheckUtil.errors.push(check_obj.errmessage); } } } } } /** *检验自定义验证 */ function checkDefinedChecks(){ for(var i=0;i<checkutil.definedchecks.length;i++){ var check_obj = CheckUtil.definedchecks[i]; if(check_obj.expression){ CheckUtil.errors.push(check_obj.errmessage); } } } /** *显示错误信息 */ function showError(){ if(!CheckUtil.status){ var show = ""; for(var i=0;i<checkutil.errors.length;i++){ show +=(i+1)+". "+CheckUtil.errors[i]+"\n"; } alert(show); CheckUtil.firstErrObj.focus(); CheckUtil.firstErrObj.select(); } } function checkData(){ CheckUtil.init(); CheckUtil.addCheck(document.forms[0].username,CheckUtil.REQUIRED,"请输入用户名"); CheckUtil.addCheck(document.forms[0].username,CheckUtil.USERNAME,"用户名须由字母开头,及4-19位单词字符组成"); CheckUtil.addCheck(document.forms[0].password,CheckUtil.REQUIRED,"请输入密码"); CheckUtil.addCheck(document.forms[0].checkcode,CheckUtil.NUM,"验证码须为数字"); CheckUtil.addCheck(document.forms[0].logindate,CheckUtil.DATE1,"请输入正确的日期格式，形如yyyy-mm-dd"); CheckUtil.addDefinedCheck(document.forms[0].password!=document.forms[0].password2,"两次输入的密码不相同"); return CheckUtil.execute(); } </script> </head> <body> <form name="form1" action="www.blogjava.net/ilovezmh" method="post" onsubmit="return checkData();"> <label>用户名</label> <input name="username" type="text" size="20" /><br/> <label>密　码</label> <input name="password" type="password" size="20" /><br/> <label>确　认</label> <input name="password2" type="password" size="20" /><br/> <label>验证码</label> <input name="checkcode" type="text" size="20" /><br/> <label>日　期</label> <input name="logindate" type="text" size="20" /><br/> <button name="sub" type="submit"> 提　交　</button> </form> </body> </html>
运行代码
其实也可以方便的根据需要更改提示的方式。

javascript学习实践－－新手上路－－验证表单

你可能感兴趣的:(javascript学习实践－－新手上路－－验证表单)