shaoyun

有时候我们并不需要复杂的验证,去逐一判断表单元素的数据类型,只需要判断字段是否为空就行,以下是一个简单的通用验证,适用一些对数据安全性不太敏感的场合,使用jQuery实现。

验证规则:
1. 通过自定义属性empty验证元素是否为空,如empty=false表示不能为空,失败弹出提示消息
2. 通过自定义属性ctlname来为元素的字段命名,以便alert弹出定义好的提示信息
3. 通过自定义属性eqctl来验证密码字段,其值指向要重复输入元素的ID,用于确认密码输入

  1. function checkform(formobj){  
  2.     var ret=false;  
  3.     var condcnt=0,passcnt=0;  
  4.     $(formobj).find("input,select").each(function(){  
  5.         if($(this).attr("empty")){  
  6.             if($(this).attr("empty")=="false"){  
  7.                 condcnt++;  
  8.                 var val=$(this).val();  
  9.                 if(val.length>0){  
  10.                     passcnt++;  
  11.                 }else{  
  12.                     alert($(this).attr("ctlname")+"不能为空!"); return false;  
  13.                 }  
  14.             }  
  15.         }  
  16.         if($(this).attr("eqctl")){  
  17.             condcnt++;  
  18.             if($(this).val()==$("#"+$(this).attr("eqctl")).val()){  
  19.                 passcnt++;  
  20.             }else{  
  21.                 alert($("#"+$(this).attr("eqctl")).attr("ctlname")+"与"+$(this).attr("ctlname")+"输入不一致!"); return false;  
  22.             }  
  23.         }  
  24.     });  
  25.     if(condcnt==passcnt) ret=true;  
  26.     return ret;  

页面代码:

  1. <form method="post" action="action.asp?act=add" onsubmit="return checkform(this)"> 
  2. 用户名:<input ctlname="用户名" empty="false" name="user_name" id="user_name" type="text" /> 
  3. 登陆密码:<input ctlname="登陆密码" empty=false name="user_pwd" id="user_pwd" type="password" /> 
  4. 确认密码:<input ctlname="确认密码" empty=false eqctl="user_pwd" name="user_pwd2" id="user_pwd2" type="password" /> 
  5. <input type="submit" value="确认提交" /> 
  6. </form> 

分类:

技术点:

相关文章: