做网页表单经常要用到数据校验的功能。
JavaScript校验是一种比较常用的手段。最近学习jQuery的过程中，发现了一个js校验框架--jQuery.validate。
她是一款基于jquery的校验工具，基本可以满足我们大多数的页面校验需要，
且支持ajax校验。支持各种自定义的扩展，包括自定义校验规则，自定义错误显示的方式等。
现在就来写一下使用jQuery.validate来验证表单的方法吧！
首先我们要导入所需要的js包：
<script src="test/jquery.js" type="text/javascript"></script>
<script src="test/jquery.validate.js" type="text/javascript"></script>
然后编写HTML代码在body标签中加入以下内容：
<fieldset style="width:480px; margin:0 auto;">
<legend>用户注册</legend>
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">用户名</label>
<input id="firstname"name="firstname"type="text"/><span class="red">*</span>
</p>
<p>
<label for="realname">真实名</label>
<input id="realname" name="realname" type="text" />
</p>
<p>
<label for="email">邮 箱</label>
<input id="email" name="email" type="text" /><span class="red">*</span>
</p>
<p>
<label for="password">密 码</label>
<input id="password" name="password" type="password" /><span class="red">*</span>
</p>
<p>
<label for="confirm_password">确 认</label>
<input id="confirm_password" name="confirm_password" type="password" /><span class="red">*</span>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</fieldset>
这样就有了一个简单的用户注册表单的效果图了：
接下来就要写表单验证的js代码了：
<script type="text/javascript">
$(document).ready(function() {
$("#signupForm").validate({
rules: {
firstname: {
required: true,
minlength: 5
},
realname: {
minlength:5
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
}
})
});
</script>
点击按钮我们可以看到效果如图：如图：
但是这些提示信息都是英文的，怎么办呢？别担心，有办法解决；现在让我们写一个jquery.validate.message_cn.js文件，文件内容如下：
var cnmsg = {
required: "必选项",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入一个最小为 {0} 的值")};
jQuery.extend(jQuery.validator.messages, cnmsg);
再将这个文件导入我们的HTML代码中：
<script src="test/jquery.validate.message_cn.js" type="text/javascript"></script>
现在让我们再次预览效果：如图：
提示信息是不是变成了中文，呵呵……神奇吧！当然你也可以根据自己需要来修改jquery.validate.message_cn.js文件就可以得到你想要的提示信息的效果了。
到这里差不多就完成了表单的验证了，但是还是有个小小的问题--那就是填写错误时的提示信息虽然有了，可是它看起来确实不怎么好看是吧。
那么怎么让它变得更好看一些呢？现在让我们来进一步修改代码，我们先要定义一下样式，这样它就可以显示出比较好看的效果了；
进一步编写样式代码：
/*错误样式*/
input.error { border: 1px dashed red;background:yellow; padding:0; }
.error {
padding-left: 16px;
margin-left: 2px;
color:red;
/*背景图片（校验未通过的’×’图标）*/
background: url(test/unchecked.gif) no-repeat 0px 0px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
/*验证通过样式*/
input.valid{ background:#FFC; border:#09F solid 1px; padding:0;}
.valid {
padding-left: 16px;
margin-left: 2px;
/*背景图片(校验通过的’√’图标)*/
background: url(test/checked.gif) no-repeat 0px 0px;
font-family:Verdana, Geneva, sans-serif;
color:#00F;
font-size:10px;
}
在验证的js代码中加入以下内容：
success:function(label)
{
label.html(" ").addClass("valid").text('ok');
}
现在再次预览效果：如图：
最终的代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>User login</title>
<style type="text/css">
.red{ color:red;}
.submit{ width:80px;}
/*错误样式*/
input.error { border: 1px dashed red;background:yellow; padding:0; }
.error {
padding-left: 16px;
margin-left: 2px;
color:red;
/*背景图片（校验未通过的’×’图标）*/
background: url(test/unchecked.gif) no-repeat 0px 0px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
/*验证通过样式*/
input.valid{ background:#FFC; border:#09F solid 1px; padding:0;}
.valid {
padding-left: 16px;
margin-left: 2px;
/*背景图片(校验通过的’√’图标)*/
background: url(test/checked.gif) no-repeat 0px 0px;
font-family:Verdana, Geneva, sans-serif;
color:#00F;
font-size:10px;
}
</style>
<script src="test/jquery.js" type="text/javascript"></script>
<script src="test/jquery.validate.js" type="text/javascript"></script>
<script src="test/jquery.metadata.js" type="text/javascript"></script>
<script src="test/jquery.validate.message_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#signupForm").validate({
rules: {
firstname: {
required: true,
minlength: 5
},
realname: {
minlength:5
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
},
success:function(label)
{
label.html(" ").addClass("valid").text('ok');
}
})
});
</script>
</head>
<body>
<fieldset style="width:480px; margin:0 auto;">
<legend>用户注册</legend>
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">用户名</label>
<input id="firstname" name="firstname" type="text" /><span class="red">*</span>
</p>
<p>
<label for="realname">真实名</label>
<input id="realname" name="realname" type="text" />
</p>
<p>
<label for="email">邮 箱</label>
<input id="email" name="email" type="text" /><span class="red">*</span>
</p>
<p>
<label for="password">密 码</label>
<input id="password" name="password" type="password" /><span class="red">*</span>
</p>
<p>
<label for="confirm_password">确 认</label>
<input id="confirm_password" name="confirm_password" type="password" /><span class="red">*</span>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</fieldset>
</body>
</html>
扫一扫
7317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
