前言:Html5和css3已经走入视线。html5新增了很多东西,比如表单元素的类型,验证等等,但是现在诸多浏览器还不兼容html5的新特性,故此,使用jquery加以验证。
等大部分浏览器支持html5,页面不用修改,直接删除jquery插件就可以继续使用。
注意:1、本例使用的jquery插件是jquery.tools.min.js,最好使用包含jquery基础包的完整版本。 2、本例中的验证,在火狐,ie7、8、9,Safari中测试了,可以用。 3、表单提交使用Submit按钮
花了好久调试的,希望对看到的人有用。如果有错误,欢迎指正。
Jquery_Validator_Exampes
1、基础示例
效果图: Html代码:
View Code
<form id="from1"><table width="500" border="0" cellpadding="4" cellspacing="4"><tr><td colspan="2"><div align="center">本例包含 A-E 的内容</div></td></tr><tr><td width="120">name </td><td ><input type="text" name="name" placeholder="name" min="5" man="50" onFocus="$(this).select()"/></td></tr><tr><td >email </td><td ><input type="email" required="required" name="email"/></td></tr><tr><td>website </td><td><input type="url" required="required" name="url"/></td></tr><tr><td>age</td><td><input type="number" name="age" pattern="[0-9]" data-message="请输入0-9的数字"/></td></tr><tr><td>time</td><td><input type="time" name="time" data-message="Please fill in the correct time"/></td></tr><tr><td>Password </td><td><input type="password" name="password" required="required"/></td></tr><tr><td>Password check</td><td><input type="password" name="check" data-equals="password"/></td></tr><tr><td>Hobby</td><td><input name="Hobby" type="checkbox" class="checkbox" id="hoddy" value="01" group="mHobby">sleep</input><br/><input name="Hobby" type="checkbox" class="checkbox" id="hoddy" value="02" group="mHobby">Swimming</input><br/><input name="Hobby" type="checkbox" class="checkbox" id="hoddy" value="03" group="mHobby">Run</input></td></tr><tr><td>Sex</td><td><input name="sex" type="radio" class="radio" value="0" checked>Man <input type="radio" name="sex" value="1" class="radio">Woman</td></tr><tr><td>Other</td><td><textarea cols="20" rows="5" required="required" data-message="Write something"></textarea></td></tr><tr><td>Country</td><td><select name="select" required="required"><option selected value="0">请选择</option><option value="111">中国</option><option value="222">英国</option><option value="333">美国</option></select></td></tr><tr><td>Area</td><td><select name="select2" size="5" multiple required="required"><option value="111">北京</option><option value="222">上海</option><option value="333">广州</option></select></td></tr><tr><td>I accept the terms</td><td><input type="checkbox" id="accept" required="required" class="checkbox"/></td></tr><tr><td></td><td><input type="Submit" class="btn" value="Submit"/></td></tr></table><br/></form>
//
A、常用html5增加的input类型包括:email、url、number、time.
B、常用html5增加的input属性包括:required(必填)、pattern(验证正则表达式)、data-message(错误提示)、min(最小长度)、max(最大长度)、data-equals(判断两个输入框值是否一致,常用于密码框的2次输入)
C、使用jquery验证:没有特殊样式需求,在表单后面调用下面的方法:
$("#from1").validator();
D、当input类型为time时,在支持html5的浏览器中,输入框自动识别输入格式,在不支持html5的浏览器中,使用以下代码:
$.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) { return /^\d\d:\d\d$/.test(value); });
$.tools.validator.fn()的三个参数分别是:input类型,错误提示,函数
E、当data-equals属性出现时,在支持html5的浏览器中,自动验证两个输入框值是否相等,在不支持html5的浏览器中,使用以下代码:
$.tools.validator.fn("[data-equals]", "Different value and $ 1", function(input) { var name = input.attr("data-equals"), field = this.getInputs().filter("[name=" + name + "]"); return input.val() == field.val() ? true : [name]; });
$.tools.validator.fn()的参数中‘$1’代表 data-equals 的值
F、国家选项为菜单类型, 没有直接可以用的验证方法,使用以下代码:
$.tools.validator.fn("[name=select]", "Please select a value", function(input, value) { if( value == "0"){ return false; }else{ return true; } });
再举个例子:验证id为name的文本框。
$.tools.validator.fn("[id=name]", "该品牌已存在", function(input, value) { if(isBrandExists()){ return false; }else if(isBrandHasRel()){ return false; }else{ return true; } });
isBrandExists()和isBrandHasRel()方法是含有业务逻辑的验证。
2、错误提示位置修改示例
// '
})
// ]]>
效果图: html代码:
View Code
<form id="from2"><table width="500" border="0" cellpadding="10" cellspacing="10"><tr><td colspan="2"><div align="center">本例包含 G 的内容</div></td></tr><tr><td width="90">email <span class="star">*</span></td><td><input type="email" required="required" name="email"/></td></tr><tr><td>website <span class="star">*</span></td><td><input type="url" required="required" name="url"/></td></tr><tr><td>age <span class="star">*</span></td><td><input type="number" name="age" pattern="[0-9]" data-message="Please fill in the correct number"/></td></tr><tr><td>I accept <span class="star">*</span></td><td><input type="checkbox" id="accept" required="required" class="checkbox"/></td></tr><tr><td></td><td><input type="Submit" class="btn" value="Submit"/></td></tr></table></form>
G、错误提示的位置可以不同,可以设置不同的提示框样式。使用以下代码:
$("#myform2").validator({ position: 'top left', //提示框出现的位置。一共有8个方位 offset: [-12, 0],//提示框的偏移量 message: '<div><em/></div>'//提示文字的容器,这里的<em/>是为了美观设置的箭头,一般使用<div></div> })
用到的css样式如下:
.error { padding: 4px 8px; border: 1px solid #ffff99; height: 16px; color:#336699; font-size: 12px; display: none; background-color: #ffff99; vertical-align:middle; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius-topleft: 0; -moz-box-shadow: 0 0 6px #ddd; -webkit-border-top-left-radius: 0; -webkit-box-shadow: 0 0 6px #ddd; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0;} .error em { border-width: 10px; border-style: solid; border-color:#ffff99 transparent transparent; width: 0px; height: 0px; bottom: -20px; display: block; position: absolute;}
3、错误框标红示例
//
效果图: html代码:
View Code
<form id="from3"><table width="500" border="0" cellpadding="10" cellspacing="10"><tr><td colspan="2"><div align="center">本例包含 H 的内容</div></td></tr><tr><td width="80">email <span class="star">*</span></td><td><input type="email" required="required" name="email" data-message="请输入正确的电子邮件"/></td></tr><tr><td>website <span class="star">*</span></td><td><input type="url" required="required" name="url" data-message="请输入正确的url"/></td></tr><tr><td>other </td><td><input type="text" name="text"/></td></tr><tr><td></td><td><input type="Submit" class="btn" value="Submit"/></td></tr></table></form>
H、出现错误时,给输入框加上醒目的样式。使用以下代码:
$("#myform3").bind("onFail", function(e, errors) { if (e.originalEvent.type == 'submit') { $.each(errors, function() { var input = this.input; input.css({border: 'red 1px solid'}).focus(function() {//这里为输入错误的样式 input.css({borde: '#ccc 1px solid'});//这里为输入正确后的样式 }); }); } });
4、仿服务器验证示例(含有业务逻辑的验证也可以这样写)
// 效果图,图1为验证成功,图2为验证失败 图1 图2
html代码:
View Code
<form id="from4"><table width="500" border="0" cellpadding="10" cellspacing="10"><tr><td colspan="2"><div align="center">本例包含 I 的内容</div></td></tr><tr><td width="80">name <span class="star">*</span></td><td><input type="text" name="name" pattern="[a-zA-Z ]{5,}" id="name2" data-message="请输入至少5位的英文名字"/></td></tr><tr><td>age <span class="star">*</span></td><td><input type="number" name="age" pattern="^\d+[\.\d]?\d{0,2}$" data-message="请输入2位数字"/></td></tr><tr><td></td><td><input type="Submit" class="btn" value="Submit"/></td><td></td></tr></table></form>
I、模拟后台验证。使用以下代码:
这是在前台基本验证通过以后再到服务器验证数据。
$("#from4").validator().submit(function(e) { var form = $(this); // 如果客户端验证通过 if (!e.isDefaultPrevented()) { $.getJSON("js/server-fail.js", function(json){ // 服务器端验证通过,就跳转 if ($("#name2").val()=="qwert") { form.load("success.html"); // 服务器端验证失败,使用json中的信息验证 } else { form.data("validator").invalidate(json); } }); //禁止默认提交 e.preventDefault(); } });