jquery 表单校验

<link type="text/css" href="<%=basepath%>css/form/validate.css"
    rel="stylesheet" />
<script type="text/javascript"
    src="<%=basepath%>js/common/jquery-1.9.1.js"></script>
<script type="text/javascript"
    src="<%=basepath%>js/common/jquery.validate.min.js"></script>
<script type="text/javascript"
    src="<%=basepath%>/js/common/jquery.form.js"></script>
<script type="text/javascript"
    src="<%=basepath%>/js/validate/userValidateMethods.js"></script>
<style type="text/css">
<script>
$(document).ready(function(){
            $("#testForm").validate({
                //提交成功时的回调函数
                submitHandler : function(){
                    var datas = $("#testForm").serializeArray();
                     $.post('<%=basepath%>jsp/testService/test.do', datas, function(result){
                         alert(result.message);
                         if(result.code == "0"){
                             //$("#submitBtn").attr("readonly","true");
                     //$("#draftBtn").attr("readonly","true");
                             
                         }
                     });
                },
                onfocusout: function(element){
                    $(element).valid();
                },
                rules: {
                    'projectinfo': {
                        checkProjectName : true
                    },
                    'customercompany': {
                        required : true
                    },
                    'customerlinkman' : {
                        required : true
                    },
                    'customermobile' : {
                        required : true,
                        isMobile : true
                    },
                    'customerphone' : {
                        isPhone : true
                    }
                },
                messages: {
                    'projectinfo': {
                        checkProjectName : "没有可选项目，必须填写项目信息"
                    },
                    'customercompany' : {
                        required : "请填写企业名称"
                    },
                    'customerlinkman' : {
                        required : "请填写联系人"
                    },
                    'customermobile' : {
                        required : "请填写联系人手机号码",
                        isMobile : "请填写正确的手机号码"
                    },
                    'customerphone' : {
                        isPhone : "请填写正确的电话号码"
                    }
                }
            });
        });
</script>

其中userValidateMethods.js为我们自定义的校验方法，方法由我们来实现。代码如下：

// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");

// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod('isPhone', function(value,element) {
var length = value.length;
var mobile = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
var tel = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,8}/;
return this.optional(element) || (tel.test(value) || mobile.test(value));

}, '请正确填写您的联系电话');

//当项目名称没有时，必须填写项目信息
jQuery.validator.addMethod('checkProjectName', function(value,element) {
if($("#projectname").val() == ''){
return value != '';
}
return true;

}, '请正确填写您的联系电话');

// 手机号码范围验证
jQuery.validator.addMethod("validNumRange", function (value, element){

var flag=false;
if(value){
value=parseInt(value);
if(!isNaN(value)){
flag=true;
}
}
if(flag&&0<=value&&value<=10){
flag=true;
}else{
flag=false;
}
return flag;

}, "数值范围为0-10");

 

另外一种是由事件驱动的校验方式：

//同样，需引入依赖的js，css
<script>
数字范围验证
function validateForm(){
    return $("#testForm").validate({
        onfocusout: function(element){
            $(element).valid();
        },
        rules: {
            'score': {
                required: true,
                validNumRange:true
            }
        },
        messages: {
            'score': {
                required: "评分必填",
                validNumRange:"范围不对"
                
            }
        }
    });

}

$(function(){
    
    validateForm();
        
        $("#testBtn").click(function(){
        if(validateForm().form()){
            //序列化表单  
            var score= $("#testForm").serialize();
            $.ajax( {    
                url:'${pageContext.request.contextPath }/jsp/testService/test2.do',
                //执行指定的方法   
                data:score,    
                type:'post',    
                success:function(data) {    
                     if(data.code==0){
                         alert("评议评分成功 ！");
                         
                     }
                     if(data.code==1){
                         alert("评议评分失败 ！");
                     }
                },    
                
           });
        }else{
            
            return false;
        }
        
    });
   
});
</script>