<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery formValidator表单验证插件 -- by:猫冬，email:wzmaodong@126.com</title>
<meta name="Author" content="猫冬">
<meta name="description" content="jQuery formValidator表单验证插件" />
<meta name="keywords" content="jQuery,formValidator,插件,表单,验证,插件,javascript,表单验证,提示层" />
<script src="jquery_last.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>
<script src="formValidator.js" type="text/javascript" charset="UTF-8"></script>
<script src="formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formid:"form1",onerror:function(){alert("校验没有通过，具体错误请看错误提示")}});
$("#sfz").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"你输入的身份证格式不正确"});;
$("#sfz1").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).functionValidator({fun:isCardID});
$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作，你的整数正确"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});
$("#zzs").formValidator({onshow:"请输入正整数",oncorrect:"谢谢你的合作，你的正整数正确"}).regexValidator({regexp:"intege1",datatype:"enum",onerror:"正整数格式不正确"});
$("#fzs").formValidator({onshow:"请输入负整数",oncorrect:"谢谢你的合作，你的负整数正确"}).regexValidator({regexp:"intege2",datatype:"enum",onerror:"负整数格式不正确"});
$("#sz").formValidator({onshow:"请输入数字",oncorrect:"谢谢你的合作，你的数字正确"}).regexValidator({regexp:"num",datatype:"enum",onerror:"数字格式不正确"});
$("#zs1").formValidator({onshow:"请输入正数",oncorrect:"谢谢你的合作，你的正数正确"}).regexValidator({regexp:"num1",datatype:"enum",onerror:"正数格式不正确"});
$("#fs").formValidator({onshow:"请输入负数",oncorrect:"谢谢你的合作，你的负数正确"}).regexValidator({regexp:"num2",datatype:"enum",onerror:"负数格式不正确"});
$("#sj").formValidator({onshow:"请输入你的手机号码",onfocus:"必须是13或15打头哦",oncorrect:"谢谢你的合作，你的手机号码正确"}).regexValidator({regexp:"mobile",datatype:"enum",onerror:"手机号码格式不正确"});
//$("#").formValidator({onshow:"",onfocus:"请输入",oncorrect:"谢谢你的合作，你的正确"}).regexValidator({regexp:"",datatype:"enum",onerror:"格式不正确"});
$("#email").formValidator({onshow:"请输入你的email",onfocus:"请注意你输入的email格式，例如:wzmaodong@126.com",oncorrect:"谢谢你的合作，你的email正确"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email格式不正确"});
$("#fds").formValidator({onshow:"请输入浮点数",oncorrect:"谢谢你的合作，你的浮点数正确"}).regexValidator({regexp:"decmal",datatype:"enum",onerror:"浮点数格式不正确"});
$("#zfds").formValidator({onshow:"请输入正浮点数",oncorrect:"谢谢你的合作，你的正浮点数正确"}).regexValidator({regexp:"decmal1",datatype:"enum",onerror:"正浮点数格式不正确"});
$("#ffds").formValidator({onshow:"请输入负浮点数",oncorrect:"谢谢你的合作，你的负浮点数正确"}).regexValidator({regexp:"decmal2",datatype:"enum",onerror:"负浮点数格式不正确"});
$("#fffds").formValidator({onshow:"请输入非负浮点数",oncorrect:"谢谢你的合作，你的非负浮点数正确"}).regexValidator({regexp:"decmal4",datatype:"enum",onerror:"非负浮点数格式不正确"});
$("#fzfds").formValidator({onshow:"请输入非正浮点数",oncorrect:"谢谢你的合作，你的非正浮点数正确"}).regexValidator({regexp:"decmal5",datatype:"enum",onerror:"非正浮点数格式不正确"});
$("#ys").formValidator({onshow:"请输入16进制颜色",oncorrect:"谢谢你的合作，你的16进制颜色正确"}).regexValidator({regexp:"color",datatype:"enum",onerror:"16进制颜色格式不正确"});
$("#yb").formValidator({onshow:"请输入邮编",onfocus:"6位数字组成的哦",oncorrect:"谢谢你的合作，你的邮编正确"}).regexValidator({regexp:"zipcode",datatype:"enum",onerror:"邮编格式不正确"});
$("#ip4").formValidator({onshow:"请输入ip4",onfocus:"例如：172.16.201.18",oncorrect:"谢谢你的合作，你的ip4正确"}).regexValidator({regexp:"ip4",datatype:"enum",onerror:"ip4格式不正确"});
$("#fk").formValidator({onshow:"请输入非空字符",oncorrect:"谢谢你的合作，你的非空字符正确"}).regexValidator({regexp:"notempty",datatype:"enum",onerror:"非空字符格式不正确"});
$("#tp").formValidator({onshow:"请输入图片名",oncorrect:"谢谢你的合作，你的图片名正确"}).regexValidator({regexp:"picture",datatype:"enum",onerror:"图片名格式不正确"});
$("#rar").formValidator({onshow:"请输入压缩文件名",oncorrect:"谢谢你的合作，你的压缩文件名正确"}).regexValidator({regexp:"rar",datatype:"enum",onerror:"压缩文件名格式不正确"});
$("#qq").formValidator({onshow:"请输入QQ号码",oncorrect:"谢谢你的合作，你的QQ号码正确"}).regexValidator({regexp:"qq",datatype:"enum",onerror:"QQ号码格式不正确"});
$("#dh").formValidator({onshow:"请输入国内电话",onfocus:"例如：0577-88888888或省略区号88888888",oncorrect:"谢谢你的合作，你的国内电话正确"}).regexValidator({regexp:"tel",datatype:"enum",onerror:"国内电话格式不正确"});
$("#yhm").formValidator({onshow:"请输入用户名",oncorrect:"谢谢你的合作，你的用户名正确"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"});
$("#zm").formValidator({onshow:"请输入字母",oncorrect:"谢谢你的合作，你的字母正确"}).regexValidator({regexp:"letter",datatype:"enum",onerror:"字母格式不正确"});
$("#dxzm").formValidator({onshow:"请输入大写字母",oncorrect:"谢谢你的合作，你的大写字母正确"}).regexValidator({regexp:"letter_u",datatype:"enum",onerror:"大写字母格式不正确"});
$("#xxzm").formValidator({onshow:"请输入小写字母",oncorrect:"谢谢你的合作，你的小写字母正确"}).regexValidator({regexp:"letter_l",datatype:"enum",onerror:"小写字母格式不正确"});
$("#sfz").formValidator({onshow:"请输入身份证",oncorrect:"谢谢你的合作，你的身份证正确"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"身份证格式不正确"});
});
</script>
<style type="text/css" media="all">
body,div{font-size:12px; margin:10px;}
</style>
</head>
<body>
<h2>如何调用扩展库</h2>
<p>正则表达式示例</p>
<p><a href="http://wzmaodong.cnblogs.com">猫冬的博客</a></p>
<form action="" method="post" name="form1" id="form1">
<table border="0px" style="font-size:12px">
<tr>
<td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td>
</tr>
<tr>
<td align="right">身份证(正则表达式库):</td>
<td><input name="sfz" type="text" id="sfz" /></td>
<td><div id="sfzTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">身份证(外部函数):</td>
<td><input type="text" id="sfz1" style="width:120px" /></td>
<td><div id="sfz1Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">整数:</td>
<td><input type="text" id="zs" style="width:120px" /></td>
<td><div id="zsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正整数:</td>
<td><input type="text" id="zzs" style="width:120px" /></td>
<td><div id="zzsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">负整数:</td>
<td><input type="text" id="fzs" style="width:120px" /></td>
<td><div id="fzsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">数字:</td>
<td><input type="text" id="sz" style="width:120px" /></td>
<td><div id="szTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正数（正整数 + 0）:</td>
<td><input type="text" id="zs1" style="width:120px" /></td>
<td><div id="zs1Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">负数（负整数 + 0）:</td>
<td><input type="text" id="fs" style="width:120px" /></td>
<td><div id="fsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">浮点数:</td>
<td><input type="text" id="fds" style="width:120px" /></td>
<td><div id="fdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正浮点数:</td>
<td><input type="text" id="zfds" style="width:120px" /></td>
<td><div id="zfdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">负浮点数:</td>
<td><input type="text" id="ffds" style="width:120px" /></td>
<td><div id="ffdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非负浮点数（正浮点数 + 0）:</td>
<td><input type="text" id="fffds" style="width:120px" /></td>
<td><div id="fffdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非正浮点数（负浮点数 + 0）:</td>
<td><input type="text" id="fzfds" style="width:120px" /></td>
<td><div id="fzfdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">颜色:</td>
<td><input type="text" id="ys" style="width:120px" /></td>
<td><div id="ysTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">你的EMAIL:</td>
<td><input type="text" id="email" style="width:120px" /></td>
<td><div id="emailTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">手机:</td>
<td><input type="text" id="sj" style="width:120px" /></td>
<td><div id="sjTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">邮编:</td>
<td><input type="text" id="yb" style="width:120px" /></td>
<td><div id="ybTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非空:</td>
<td><input type="text" id="fk" style="width:120px" /></td>
<td><div id="fkTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">图片:</td>
<td><input type="text" id="tp" style="width:120px" /></td>
<td><div id="tpTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">压缩文件:</td>
<td><input type="text" id="rar" style="width:120px" /></td>
<td><div id="rarTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">ip4:</td>
<td><input type="text" id="ip4" style="width:120px" /></td>
<td><div id="ip4Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">QQ号码:</td>
<td><input type="text" id="qq" style="width:120px" /></td>
<td><div id="qqTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">国内电话:</td>
<td><input type="text" id="dh" style="width:120px" /></td>
<td><div id="dhTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">用户名:</td>
<td><input type="text" id="yhm" style="width:120px" /></td>
<td><div id="yhmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">字母:</td>
<td><input type="text" id="zm" style="width:120px" /></td>
<td><div id="zmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">大写字母:</td>
<td><input type="text" id="dxzm" style="width:120px" /></td>
<td><div id="dxzmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">小写字母:</td>
<td><input type="text" id="xxzm" style="width:120px" /></td>
<td><div id="xxzmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">身份证:</td>
<td><input type="text" id="sfz" style="width:120px" /></td>
<td><div id="sfzTip" style="width:300px"></div></td>
</tr>
<tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
jQuery formvalidate表单验证效果，当用户输入不正确时，若点击提交按钮的话，则内容不符合规则的文本框会抖动，以提示用户此项输入有问题，有的把抖动形容为摇晃，无所谓，反正是那一类。本表单验证效果形式新颖，...
集成bootstarp前端样式和Jquery的常见表单元素验证示例代码
form-validate.js 是一个用于验证表单的简单脚本（顾名思义）。 要使用它，只需使用带有.validate()方法的 jQuery 选择器： $ ( "#myForm" ) . validate ( ) ; 这将为表单设置onsubmit处理程序。 这意味着无论...
web开发中经常会遇到要对输入内容进行客户端验证的情况，这个插件中列举了常用的验证，以及Demo展示
设置meteor add skinnygeek1010:validate-form 默认情况下，Validate-Form将使事件冒泡直至layout模板。 如果您最顶层的模板没有这样命名，请使用rootLayout标志对其进行配置。 如果需要调试，请添加调试标志以将...
在form表单上添加一个提交事件调用验证数据方法 <form name="listform" action="resume-doAdd" method="post" onsubmit="return Validator.Validate(this,3);"> 请输入正确的手机号！" requiremsg="移动电话不能为...
使用jQuery Validate插件可以使用remote校验规则完成验证。 示例： 一.基本用法 1.需要验证的表单 <form id="registForm"> <input type="text" id="username" name="username"> </form> 2.js ...
simple_form_validation 简单的表单验证提供验证格式并返回结果介绍它仅验证输入值。特征简单的只有JavaScript 仅提供价值验证并返回结果开发人员可以处理形式验证中的逻辑用法方法必需（validateInput，errorMsg） ...
支持原生 HTML5 验证属性和输入类型的轻量级 JavaScript 表单验证库。 仍在开发中 :sleeping_face: 简单使用示例 FormValidator ( '#register_form' , { events : [ 'submit' , 'change' , 'input' ] , ...
vee-validate是Vue.js的基于模板的验证框架，使您可以验证输入并显示错误。 基于模板，您仅vee-validate是Vue.js的基于模板的验证框架，该框架可让您验证输入并显示错误。 基于模板，您只需要为每个输入指定值更改时...
它所提供的验证类型有：是否为空、数字、Email地址、判断输入值是否在某一范围内等，此外你也可以自定义验证规则，它也支持在一个输入框中使用多种验证规则。验证规则的提示信息是默认设置在JS文件中的，它也提供了...
2.在需要验证的表单加入属性“validate” <form validate> <!--your field here--> </form> 3.在需要验证的控件加入属性“check”（可以多个验证一起进行，多个则用空格隔开） empty：不为空判断...
<form name="formname" onSubmit="return validateForm(this)"></form> 将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。 2、空值验证 表单中任意域加上...
PHP输入验证 易于使用PHP类可用于验证来自HTML表单输入字段或您可能在其他任何地方使用的用户输入。 请注意，这只是validation ，对关键操作，你可能需要考虑sanitizing用户数据提交给数据库等我假设你已经清楚地...
我这里设计了一个简单的javascript客户端验证工具，在页面中只需要对要进行验证的表单(form)及其所属的表单域对象(input)进行属性声明，即可完成配置，基本不需要手工书写javascript代码即可完成验证工作。
默认校验规则 代码如下:(1)required:true 必输字段(2)remote:”check.php” 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true ...
vue-form-json验证生成Vue表单所有字段都是必填字段，默认情况下输入文本。 提交后，将在$ root上发出带有formName和所有值的事件“ formSubmitted”。特征从数组生成表单（formFields属性） 默认情况下，布尔玛类...
form简单验证 <input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> datatype="e"验证邮箱 ignore="ignore"忽略，如果填写就...
jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持。 正常的验证模式如下: <form id="ff" action=...