巧用jQuery来对表单进行基本验证

来源:互联网 发布:手机淘宝我是商家在哪 编辑:程序博客网 时间:2024/05/18 20:31
  function  nextsubmit(){  
           
if(document.forms[0].userName.value ==""){
             alert(
"用户姓名不能为空,请输入!");
             document.forms[
0].userName.focus();
             
return false;             
          }

          
          
if(document.forms[0].userPassword.value ==""){
             alert(
"用户密码不能为空,请输入!");
             document.forms[
0].userPassword.focus();
             
return false;             
          }

          
          
if(document.forms[0].newPassword.value ==""){
             alert(
"新用户密码不能为空,请输入!");
             document.forms[
0].newPassword.focus();
             
return false;             
          }

          
          
if(document.forms[0].newPassword.value != document.forms[0].checkPassword.value){
             alert(
"密码重输入确认不符,请检查!");
             document.forms[
0].newPassword.focus();
             
return false;             
          }

            
      
          
return true;    
  }

今天项目送到了测试部门,测试下来问题多多,其中一块就是表单基本验证。由于项目开始,一个老javascript老手已经做出了上诉模板,大家也为了图个项目进度,大都拷贝了上面的代码,几个礼拜下来,上面这些代码便扩散开了,好煞风景,这不刚学了jQuery嘛,干脆大家把上诉代码全部删了,写了个通用的模块。

    function  nextsubmit(){
      
        
var count;
        
        $(
'.validate').each(function(i){
            
if($(this).val()==""||$(this).val()==0){
                count 
= i;
                alert(
"请输入" + $(this).parent().prev().text());  //注意这里,我们从前面的td直接取值
                $(
this).focus();
                
return false;
            }
            
            
return true;                
        }
)
      
        
if(count!=null)
            
return false;
        
return true;
  }

下面是页面的代码片段
                            <td width="20%" class="heder">
                                所属公司 :       <!--我们让jQuery从这里取值,显示在alert里
                            </td>
                              <td width="30%" align="left" bgcolor="#FFFFFF" class="main2">
                                
<s:select list="enterprises" cssClass="validate"
                                    id
="kentId"
                                    name
="knowledge.entId"
                                    value
="%{vknowledge.entId}"
                                    listKey
="id" listValue="name" emptyOption="false"
                                    headerKey
="0" headerValue="选择公司" 
                                    onchange
="this.form.action='viewKnowledge.action?result=edit';this.form.submit();" cssStyle="width:160"/>
                                
&nbsp;
                                
<font size="1" color="red">*</font>
                            
</td>


jQuery的拿手好戏就是选择器+循环,这不等于遍历了吗?便利了~