validate

最新推荐文章于 2024-11-17 19:29:35 发布

iteye_4926

最新推荐文章于 2024-11-17 19:29:35 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery json XHTML PHP HTML ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_4926/article/details/81929542

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="content-type" content="text/http;charset=utf-8">

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

<script type="text/javascript" src="../js/plugin/validate/jquery.validate.pack.js"></script>
<script type="text/javascript" src="../js/messages_cn.js"></script>
<script>
$(document).ready(function(){

$("#login").validate({
rules: {
username: {
required: true,
remote: {
url: "exist_User.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username:function(){
return $("#username").val();
}
}
}

},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
username: {
required: "<span style='color:red'> 请输入用户名</span>",
minlength: jQuery.format("<span style='color:red'> 用户名不正确，应该在2个汉字或四个字符以上</span>")
},
email: {
required: "<span style='color:red''>请输入Email地址</span>",
email: "<span style='color:red'> 请输入正确的email地址</span>"
},
password: {
required: "<span style='color:red'> 请输入密码</span>",
minlength: jQuery.format("<span style='color:red'> 您输入的密码不正确，应该在6位或6位字符以上</span>")
},
confirm_password: {
required: "<span style='color:red'>请输入确认密码</span>",
minlength: jQuery.format("<span style='color:red'> 您输入的密码不正确，应该在6位或6位字符以上</span>"),
equalTo: "<span class='fred'>两次输入密码不一致</span>"
}
}
});

})
</script>
</head>

<body>
<form action="" method="post" id="login" name="login">
<label>用户名:</label><input name="username" id="username" type="text" />
<hr>
<label>邮件地址:</label><input name="email" type="text" />
<hr>
<label>密码:</label><input id="password" name="password" type="password" />
<hr>
<label>确认密码:</label><input name="confirm_password" type="password" />
<hr>
<input name="userinfosub" type="submit" value="提交" />
</form>

</body>
</html>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="content-type" content="text/http;charset=utf-8">
<link rel="stylesheet" type="text/css" href="../CSS/redmond/jquery-ui-1.7.1.custom.css" />
<script type="text/javascript" src="../js/jquery-min-lastest.js"></script>
<script type="text/javascript" src="../js/jquery-ui-all-min-lastest.js"></script>
<script type="text/javascript" src="../js/plugin/validate/jquery.validate.pack.js"></script>
<script type="text/javascript" src="../js/messages_cn.js"></script>
<script type="text/javascript" src="../js/jquery.metadata.js"></script>

</script>
<style type="text/css">
body
{
font-size:12px;
}
/* form中显示文字的label */
.slabel
{
width:100px;
display: -moz-inline-box;
line-height: 1.8;
display: inline-block;
text-align:right;
}
/* 出错样式 */
input.error, textarea.error
{
border: solid 1px #CD0A0A;
}
label.error
{
color:#CD0A0A;
margin-left:5px;
}
/* 深红色文字 */
.textred
{
color:#CD0A0A;
}
</style>
</head>
<body>
<form id="commentForm" method="get" action="">
<fieldset style="width:500px;">
<legend>表单验证</legend>
<p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label>

<input id="cname" name="name" size="25" class="required" minlength="2" />

<p>
<label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
<input id="cemail" name="email" size="25" class="required email"/>

<p><label for="curl" class="slabel">网址:</label>
<input id="curl" name="url" size="25" class="required" value="" />

<p><label for="ccomment" class="slabel"><em class="textred">*</em> 内容:</label>
<textarea rows="2" id="ccomment" name="comment" cols="20" class="required" style="height:80px;"></textarea>
<p><label for="ccomment" class="slabel"><em class="textred">*</em>mytest:</label>

<input type=”text” name="mytest" class="required telphoneValid"/>

<p>
<input class="submit" type="submit" value="提交" class="cancel" />
</p>
</fieldset>
</form>
<script type="text/javascript">
/*==========用户自定义方法==========*/

/*==========事件绑定==========*/
$(function()
{
jQuery.validator.addMethod("telphoneValid", function(value, element) {
var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/;
return tel.test(value) || this.optional(element);
}, "请输入正确的手机号码"); });

/*==========加载时执行的语句==========*/
$(function()
{
$("#commentForm").validate(
{
rules:
{
mytest:{email:true}
} ,
messages:
{
mytest:{required: "<span style='color:red'> 请输入密码</span>",
email:"电子邮件啊"
}
}
});
});
</script>
</body>
</html>