JqueryMobile表单验证实例

来源：互联网发布：java程序员前途堪忧啊编辑：程序博客网时间：2024/05/26 20:22

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>管理平台</title>
    <link rel="stylesheet" href="/Content/jQueryMobile/jquery.mobile-1.3.2.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="/Content/js/jquery.js"></script>
    <script src="/Content/jQueryMobile/jquery.mobile-1.3.2.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script src="Content/Js/jquery.validate.min.js"></script>

     <script type="text/javascript">


       $(document).ready(function() {

$.validator.setDefaults({
submitHandler : function(form) {
form.submit();
}
});
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element,
param) {
var length = value.length;
for (var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element)
|| (length >= param[0] && length <= param[1]);
}, "<font color='red'>请确保输入的值在3-15个字节之间(一个中文字算2个字节)</font>");

// 用户名是否存在
jQuery.validator.addMethod("isUserNameExist", function(value, element) {
var flag = $.ajax({
type : "POST",
url : "validateServlet",
data : "username=" + value,
async : false,
success : function(msg) {
alert("返回数据: " + msg);
}
}).responseText;

return this.optional(element) || flag == 1;
}, "<font color='red'>该用户不存在</font>");

// 字符验证
jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element)
|| /^[\u0391-\uFFE5\w]+$/.test(value);
}, "<font color='red'>用户名只能包括中文字、英文字母、数字和下划线</font>");

$(regFrom).validate({

rules : {
userName : {
required : true,
userName : true,
byteRangeLength : [3, 15],
isUserNameExist : true
},
password : {
required : true
}

},

messages : {
userName : {
required : "<font color='red'>请填写用户名</font>",
byteRangeLength : "<font color='red'>用户名必须在3-15个字符之间(一个中文字算2个字符)</font>",
isUserNameExist : "<font color='red'>该用户不存在</font>"
},
password : {
required : "<font color='red'>请填写密码</font>",
minlength : jQuery
.format("<font color='red'>至少输入{0}个字符.</font>")
}

},

errorPlacement : function(error, element) {
error.appendTo(element.parent());
},

success : function(label) {
// set as text for IE
label.html("<font color='green'>OK!</font>");
},

focusInvalid : false,
onkeyup : false
});

// 输入框获得焦点时，样式设置
$('input').focus(function() {
if ($(this).is(":text") || $(this).is(":password"))
$(this).addClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_normal')
.addClass('field_focus');
}
});

// 输入框失去焦点时，样式设置
$('input').blur(function() {
$(this).removeClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_focus')
.addClass('field_normal');
}
});
});

    </script>


</head>
<body>

    <div data-role="page" id="login">

        <div data-role="header" data-theme="b" >
            <h1>管理平台</h1>
        </div>

        <div data-role="content" data-theme="b">

            <form id="regFrom" name="regFrom">

                <div data-role="fieldcontain">
                    <label for="name">用户名: </label>
                    <input type="text" id="userName" name="userName" />
                    <label class="error" for="userName"></label>
                </div>

                <div data-role="fieldcontain">
                    <label for="password">密码: </label>
                    <input type="password" id="password" name="password" minlength="3" />
                    <label class="error" for="password"></label>
                </div>

                <div>
                    <input type="hidden" id="isUserNameExist"/>
                    <button class="btnLogin" type="submit" >登录</button>
                </div>
            </form>

        </div>

    </div>

</body>
</html>

0 0