本文参考了思门bak战友的文章:http://www.cnblogs.com/easyinsc/archive/2009/02/27/1407826.html
今天,也趁工作的空档,记录一下jQuery验证工具的使用。由于不便把工作中需要验证的内容贴出来,就借用了思门bak的代码作为记录,已增加自己在这方面的积累,也在此发个日志,记录一下。相关代码也在附件中附上,希望大家多多指教。
前端界面是一个叫submitform.html的文件,代码如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
- <title>jQuery验证</title>
- <script type="text/javascript" src="../../../js/jquery.js" ></script>
- <script type="text/javascript" src="../../../js/jquery-ui.js"></script>
- <script type="text/javascript" src="../../../js/jquery.validate.js" mce_src="js/jquery.validate.js"></script>
- <script type="text/javascript" src="../../../js/messages_zh.js"></script>
- <script type="text/javascript" src="../../../js/formValidatorClass.js"></script>
- <style type="text/css">
- * {
- font-family: Verdana;
- font-size: 96%;
- }
- label {
- width: 10em;
- float: left;
- }
- label.error {
- float: none;
- color: red;
- padding-left: .5em;
- vertical-align: top;
- }
- p {
- clear: both;
- }
- .submit {
- margin-left: 12em;
- }
- em {
- font-weight: bold;
- padding-right: 1em;
- vertical-align: top;
- }
- .back {
- margin-left: 3em;
- }
- </style>
- </head>
- <body>
- <form class="submitForm" id="submitForm" method="get" action="../../../bin/CWebQueryString.exe">
- <fieldset>
- <legend>表单验证</legend>
- <p>
- <label for="username">用户名</label>
- <em>*</em><input id="userName" name="username" size="25" />
- </p>
- <p>
- <label for="email">E-Mail</label>
- <em>*</em><input id="email" name="email" size="25" />
- </p>
- <p>
- <label for="phone">联系电话</label>
- <em>*</em><input id="phone" name="phone" size="25" value="" />
- </p>
- <p>
- <label for="address">地址</label>
- <em>*</em><input id="address" name="address" size="22">
- </p>
- <input class="submit" type="submit" value="提交"/>
- <input class="back" type="button" value="返回" id="back"/>
- </p>
- </fieldset>
- </form>
- </body>
- </html>
验证控制的js为formValidatorClass.js,代码如下:
- /**//**
- * @author ming
- */
- $(document).ready(function(){
- /**//* 设置默认属性 */
- $.validator.setDefaults({
- submitHandler: function(form) {
- form.submit();
- }
- });
- // 字符验证
- jQuery.validator.addMethod("stringCheck", function(value, element) {
- return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
- }, "只能包括中文字、英文字母、数字和下划线");
- // 中文字两个字节
- jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
- var length = value.length;
- for(var i = 0; i < value.length; i++){
- if(value.charCodeAt(i) > 127){
- length++;
- }
- }
- return this.optional(element) || ( length >= param[0] && length <= param[1] );
- }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
- // 身份证号码验证
- jQuery.validator.addMethod("isIdCardNo", function(value, element) {
- return this.optional(element) || isIdCardNo(value);
- }, "请正确输入您的身份证号码");
- // 手机号码验证
- jQuery.validator.addMethod("isMobile", function(value, element) {
- var length = value.length;
- var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
- return this.optional(element) || (length == 11 && mobile.test(value));
- }, "请正确填写您的手机号码");
- // 电话号码验证
- jQuery.validator.addMethod("isTel", function(value, element) {
- var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
- return this.optional(element) || (tel.test(value));
- }, "请正确填写您的电话号码");
- // 联系电话(手机/电话皆可)验证
- jQuery.validator.addMethod("isPhone", function(value,element) {
- var length = value.length;
- var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
- var tel = /^\d{3,4}-?\d{7,9}$/;
- return this.optional(element) || (tel.test(value) || mobile.test(value));
- }, "请正确填写您的联系电话");
- // 邮政编码验证
- jQuery.validator.addMethod("isZipCode", function(value, element) {
- var tel = /^[0-9]{6}$/;
- return this.optional(element) || (tel.test(value));
- }, "请正确填写您的邮政编码");
- //开始验证
- $('#submitForm').validate({
- /**//* 设置验证规则 */
- rules: {
- username: {
- required:true,
- stringCheck:true,
- byteRangeLength:[3,15]
- },
- email:{
- required:true,
- email:true
- },
- phone:{
- required:true,
- isPhone:true
- },
- address:{
- required:true,
- stringCheck:true,
- byteRangeLength:[3,100]
- }
- },
- /**//* 设置错误信息 */
- messages: {
- username: {
- required: "请填写用户名",
- stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
- byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
- },
- email:{
- required: "请输入一个Email地址",
- email: "请输入一个有效的Email地址"
- },
- phone:{
- required: "请输入您的联系电话",
- isPhone: "请输入一个有效的联系电话"
- },
- address:{
- required: "请输入您的联系地址",
- stringCheck: "请正确输入您的联系地址",
- byteRangeLength: "请详实您的联系地址以便于我们联系您"
- }
- },
- /**//* 设置验证触发事件 */
- focusInvalid: false,
- onkeyup: true,
- /**//* 设置错误信息提示DOM */
- errorPlacement: function(error, element) {
- error.appendTo(element.parent());
- }
- });
- $("#back").click(function() {
- history.back();
- });
- });
记录一下,并把代码附上,希望自己不要老遗忘……
附件为jquery的validate包和自己的一个简单代码,后台用了C语言,闲着的时候弄着玩的一个C语言写的Web应用,正好用来记录一些简单的操作代码。