jquery表单验证插件

jquery表单验证插件这个非常适合我们用在自己的项目里，对jquery感兴趣的也可以研究一下，学习学习jquery。

实现演示：

代码演示：

姓 名：value="" placeholder="请输入姓名" />
手机号：
地 址：
 
<ｓｃｒｉｐｔ src="http://code.jquery.com/jquery-1.4.1.js"><ｓｃｒｉｐｔ type="text/javascript">window.onload = function() {$("#username").focus()}$("input").blur(function() {$(".spa").css("color", "#BD362F")if($(this).is("#username")) { //姓名判断var na = /^[\u4E00-\u9FA5]{2,4}$/if($("#username").val() != "") {if(!(na.test($("#username").val()))) {$(".spa1").text("请输入2-4个汉字");$(this).css("border", "1px solid #BD362F")return false;} else if(na) {$(".spa1").text("");return true;}} else {$(".spa1").text("");}}if($(this).is("#userphone")) { //手机号判断var ph = /^1[3|5|7|8|][0-9]{9}$/if($("#userphone").val() != "") {if(!(ph.test($("#userphone").val()))) {$(".spa2").text("请输入正确手机号");$(this).css("border", "1px solid #BD362F")return false;} else if(ph) {$(".spa2").text("");return true;}} else {$(".spa2").text("");}}if($(this).is("#useraddress")) { //地址判断var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;if($("#useraddress").val() != "") {if(!(ad.test($("#useraddress").val()))) {$(".spa3").text("请输入正确地址");$(this).css("border", "1px solid #BD362F")return false;} else if(ad) {$(".spa3").text("");return true;}} else {$(".spa3").text("");}}})$("input").focus(function() {if($(this).is("#username")) {$(".spa1").text("四个汉字").css("color", "#aaa")$(this).css("border", "1px solid #aaa")}if($(this).is("#userphone")) {$(".spa2").text("11位手机号码").css("color", "#aaa")$(this).css("border", "1px solid #aaa")}if($(this).is("#useraddress")) {$(".spa3").text("最少8个字符（汉字、字母和数字）").css("color", "#aaa")$(this).css("border", "1px solid #aaa")}})$("#sub").click(function() {var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正则var ph = /^1[3|5|7|8|][0-9]{9}$/; //手机号正则var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {return true;} else {if($("#username").val() == "") {$(".spa1").text('请你填写用户名')}if($("#userphone").val() == "") {$(".spa2").text('请你填写手机号')}if($("#useraddress").val() == "") {$(".spa3").text('请你填写地址')}return false;}})

相关推荐：

jquery实现pc端滑动验证

jquery标题选择动画

jquery实现手势解锁源码