jQuery Validation讓驗證變得如此容易(三)

以下代碼進行對jQuery Validation的簡單示範包括必填項、字元長度，格式驗證

一、引入檔案

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script><script src="js/jquery.validate.js" type="text/javascript"></script>

二、聲明HTML片段

三、錯誤提示樣式

四、驗證代碼

<script type = "text/javascript">$(function() {    $("#jvForm").validate({        rules: {            username: { //使用者名稱必填 至少3位                 required: true,                minlength: 3            },            password: { //密碼必填 至少6位                 required: true,                minlength: 6            },            confirm_password: { //密碼確認                 required: true,                equalTo: "#password"            },            address: { //出生地必填                  required: true            },            mobile: { //手機必填  驗證格式                 required: true,                mobile: true            },            email: { //email必填 驗證格式                  required: true,                email: true            },        },        messages: {            username: {                required: "使用者名稱不可為空!",                minlength: "使用者名稱至少三位!"            },            password: {                required: "密碼不可為空!",                minlength: "密碼至少六位!"            },            confirm_password: {                required: "密碼確認不可為空!",                equalTo: "兩次輸入密碼不一致 !"            },            address: {                required: "請選擇出生地!",            },            mobile: {                required: "手機不可為空!",                mobile: "手機格式不正確",            },            email: {                required: "郵箱不可為空!",                email: "郵箱格式不正確",            },        }    });}) </script>

因為jquery.validate.js中沒有mobile驗證，所以需要自己增加一個

首先找到messages 在裡面添加mobile 如下：

messages: {required: "This field is required.",remote: "Please fix this field.",email: "Please enter a valid email address.",url: "Please enter a valid URL.",date: "Please enter a valid date.",dateISO: "Please enter a valid date (ISO).",number: "Please enter a valid number.",mobile: "請填寫正確的手機號碼.",digits: "Please enter only digits.",creditcard: "Please enter a valid credit card number.",equalTo: "Please enter the same value again.",maxlength: $.validator.format("Please enter no more than {0} characters."),minlength: $.validator.format("Please enter at least {0} characters."),rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),range: $.validator.format("Please enter a value between {0} and {1}."),max: $.validator.format("Please enter a value less than or equal to {0}."),min: $.validator.format("Please enter a value greater than or equal to {0}.")}

然後在methods中添加 mobile的正則校正

mobile: function( value, element ) {return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value);}

運行效果