这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery 扩展 + xml 实现表单验证功能的方法, 涉及 jQuery 操作 xml 格式数据及表单验证相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 jQuery 扩展 + xml 实现表单验证功能的方法。分享给大家供大家参考,具体如下:
此处表单验证 jQuery 引用 jquery.1.8.2.js,md5.js
扩展提示信息, 扩展验证方法 (如果有正则表达式的话可以用默认方法)
- String.prototype.trim = function() {
- return this.replace(/(^\s*)|(\s*$)/g, "");
- }; //ie下解决trim 方法问题
- (function($) {
- $.elementVal = new Array();
- /**
- ********************************************************************************************************************************************
- * ========自定义提示语==============================================================================================================
- * ========regex、如果有正则表达式的话===============================================================================================
- * ========successMsg、验证成功时====================================================================================================
- * ========errorMsg、验证失败时======================================================================================================
- * promptMsg、提示语=================================================================================================================***********************
- **/
- $.vfData = {
- errorhtml: '<img src="images/cuo_biao.png"> ',
- successhtml: '<img src="images/dui_biao.png" /> ',
- pormpthtml: '<img src="images/tishi_biao.png"> ',
- _null: {
- //successMsg : "",
- errorMsg: "不能为空!",
- promptMsg: "不能为中文"
- },
- _firstpwd: {
- regex: /^[a-z0-9_-]{6,18}$/,
- //successMsg : "",
- errorMsg: "密码格式不正确!",
- promptMsg: "6-16位字符(字母或数字),区分大小写"
- },
- _code: {
- regex: /^[a-z0-9_-]{6,18}$/,
- //successMsg : "",
- errorMsg: "机构代码不正确!",
- promptMsg: "机构代码为自填项!"
- },
- _secondpwd: {
- //successMsg : "",
- errorMsg: "两次密码不一致!,请确保初次密码格式正确",
- promptMsg: "请再次输入密码"
- },
- _email: {
- regex: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
- //successMsg : "",
- errorMsg: "邮箱地址格式不正确!",
- promptMsg: "邮箱格式为www@xxx.com"
- },
- _companyname: {
- //successMsg : "",
- errorMsg: "没有你输入的机构!",
- promptMsg: "请在所在的机构中选择"
- },
- _phone: {
- regex: /^1[3|4|5|8][0-9]\d{4,8}$/,
- successMsg: "",
- errorMsg: "你输入的手机号格式不正确!",
- promptMsg: "输入你的的手机号码!"
- },
- _tel: {
- //regex :/^[0][1-9]{2,3}[-][1-9]{1}[0-9]{8}$/,
- regex: /^[0-9]{3,4}[-]?[0-9]{9}$/,
- successMsg: "",
- errorMsg: "你输入的电话格式不正确!",
- promptMsg: "格式固定 例如 010-88888888!"
- },
- _loginname: {
- regex: /^[a-zA-Z]{1,1}[a-z0-9A-Z]{5,16}$/,
- successMsg: "",
- errorMsg: "你输入的用户名格式不正确!",
- promptMsg: "6-12位字符(字母、数字、汉字),首位必须为字母,区分大小写"
- },
- _captcha: {
- regex: /^[a-z0-9A-Z]{4}$/,
- successMsg: "",
- errorMsg: "你输入的验证码格式不正确!",
- promptMsg: "请输入验证码!"
- }
- };
- /**
- * ============================================================================================================================
- * =========自定义验证方法验证方法==============================================================================================
- * ============================================================================================================================
- * */
- $.firstpwd = "";
- $.verification = {
- // 提示信息 0:正常、1:错误 、2:提示
- _def: { //如果没有自定义的验证的话直接调用就可以了$.verification._def(obj);
- vf: function(obj) {
- var num = 0;
- if ($.utilfun.regexcheck(obj)) {
- num = 0;
- } else {
- num = 1;
- }
- return $.utilfun.showPrompt(num, obj);
- }
- },
- _null: { //判断是否为空
- vf: function(obj) {
- var num = 0;
- if (obj.val.trim() == "") {
- num = 1;
- }
- return $.utilfun.showPrompt(num, obj, $.vfData["_null"]);
- }
- },
- //===================================================需要特殊判断的=================================================================
- _companyname: { // 机构名称验证
- vf: function(obj) {
- var num = 1;
- for (var key in $.indexdata) {
- if (obj.val.trim() == key) {
- num = 0;
- break;
- }
- }
- return $.utilfun.showPrompt(num, obj);
- }
- },
- _firstpwd: {
- vf: function(obj) {
- var num = 0;
- if ($.utilfun.regexcheck(obj)) {
- $.firstpwd = obj.val;
- num = 0;
- } else {
- num = 1;
- }
- return $.utilfun.showPrompt(num, obj);
- }
- },
- _secondpwd: {
- vf: function(obj) {
- var num = 0;
- var md5val = hex_md5(obj.val);
- if ($.firstpwd != obj.val && $.firstpwd != "") {
- num = 1;
- } else {
- $("#YHMM").val(md5val.toUpperCase());
- }
- return $.utilfun.showPrompt(num, obj);
- }
- },
- _loginname: { //校验登录名的唯一性
- vf: function(obj) {
- if ($.verification._def.vf(obj)) { //先验证格式
- var params = {
- type: 1,
- value: obj.val
- };
- var num = $.utilfun.ajaxvf("/registeruserverify.go", params);
- var msg = {
- errorMsg: "用户名已存在!"
- };
- return $.utilfun.showPrompt(num, obj, msg);
- }
- }
- },
- _email: {
- vf: function(obj) { //校验邮箱的的唯一性
- if ($.verification._def.vf(obj)) { //先验证格式
- var params = {
- type: 2,
- value: obj.val
- };
- var num = $.utilfun.ajaxvf("/registeruserverify.go", params);
- var msg = {
- errorMsg: "此邮箱已经注册,请更换邮箱!"
- };
- return $.utilfun.showPrompt(num, obj, msg);
- }
- }
- },
- _phone: {
- vf: function(obj) { //验证手机号的唯一性
- if ($.verification._def.vf(obj)) { //先验证格式
- var params = {
- type: 3,
- value: obj.val
- };
- var num = $.utilfun.ajaxvf("/registeruserverify.go", params);
- var msg = {
- errorMsg: "此手机号已经注册,请更换手机号!"
- };
- return $.utilfun.showPrompt(num, obj, msg);
- }
- }
- },
- //===================================================能够直接用正则表达式判断的=====================================================
- _code: {
- vf: function(obj) {
- return $.verification._def.vf(obj);
- }
- },
- _captcha: {
- vf: function(obj) {
- return $.verification._def.vf(obj);
- }
- },
- _tel: {
- vf: function(obj) {
- return $.verification._def.vf(obj);
- }
- }
- };
- /**
- * =================================================================================================================================
- * ================公共方法=========================================================================================================
- * =================================================================================================================================
- */
- $.utilfun = {
- // 显示提示信息
- showPrompt: function(re, obj, vfData) {
- vfData = (vfData == null ? $.vfData[obj.fun] : vfData); //获取提示信息
- var formElement = $("#" + obj.id).parent().parent().find("p");
- try {
- switch (re) {
- case 0:
- formElement.html($.vfData.successhtml + (vfData.successMsg == null ? "": vfData.successMsg));
- return true;
- case 1:
- formElement.css("color", "red");
- formElement.html($.vfData.errorhtml + vfData.errorMsg + "<a id='" + obj.id + "' name='" + obj.id + "'></a>");
- return false;
- case 2:
- formElement.css("color", "green");
- formElement.html($.vfData.pormpthtml + vfData.promptMsg);
- break;
- default:
- formElement.html("");
- return true;
- }
- } catch(e) {}
- },
- regexcheck: function(obj) { // 正则表达式验证
- var regex = $.vfData[obj.fun].regex;
- if (regex == null) return false;
- regex = new RegExp(regex);
- return regex.test(obj.val.trim());
- return regex.test(obj.val);
- },
- createElementJson: function(obj) { // 根据表单的属性创建json对象以便以调用
- var json = eval("({'val':'" + obj.val() + "'," + "'id':'" + obj.attr("id") + "'," + "'regex':'" + obj.attr("regex") + "'," + "'fun':'" + obj.attr("fun") + "','must':'" + obj.attr("must") + "'})");
- return json;
- },
- getFormElement: function(obj) { // 把需要验证的表单元素加到数组中
- $.elementVal = new Array();
- obj.find("input[id*='reg_']").each(function() {
- $.elementVal.push($.utilfun.createElementJson($(this)));
- });
- },
- verification: function() { // 遍历验证
- var size = $.elementVal.length;
- var vfresult = true;
- for (var i = size - 1; i >= 0; i--) {
- var elementJson = $.elementVal[i];
- var elementvfresult = $.utilfun.doverification(elementJson);
- console.info(elementJson.id);
- if (!elementvfresult) { //给错误的表单元素添加锚点
- $("#point").attr("href", "#" + elementJson.id);
- }
- vfresult = vfresult && elementvfresult;
- }
- return vfresult;
- },
- evalmodth: function(obj) {
- var funpakger = "$.verification.";
- var thispakger = obj.fun;
- var thismodth = ".vf(obj)";
- var themodth = funpakger + thispakger + thismodth;
- return eval(themodth);
- },
- doverification: function(obj) { // 执行验证方法
- if (obj.must == "true") { //为必填项时
- var valisnull = $.verification._null.vf(obj);
- if (valisnull && obj.fun != "undefined") { //如果有验证方法的话
- if ($.utilfun.defaultverification(obj)) {
- return $.utilfun.evalmodth(obj);
- }
- } else {
- if (obj.val.trim() == "") {
- return false;
- } else {
- return true;
- }
- }
- } else { //不为必填项时
- if (obj.fun != "undefined") { //如果有验证方法的话
- if (obj.val.trim() != "") {
- if ($.utilfun.defaultverification(obj)) {
- return $.utilfun.evalmodth(obj);
- }
- } else {
- $.utilfun.showPrompt(3, obj, $.vfData["_null"]);
- return true;
- }
- } else {
- return true;
- }
- }
- },
- defaultverification: function(obj) { // 必须验证的方法
- var vfresult = true;
- // vfresult = $.verification._null.vf(obj);//添加每个表单必须检验的方法
- return vfresult;
- },
- ajaxvf: function(url, params) { //需要接口请求验证的
- var num = 0;
- $.ajax({
- type: "post",
- url: url,
- dataType: "xml",
- async: false,
- data: params,
- // contentType : "application/x-www-form-urlencoded; charset=utf-8",
- success: function(data) {
- var xmlobj = $.xml(data);
- var result = $.getnode("CODE", xmlobj.find("RETURNINFO"));
- if ("0" != result) {
- num = 1;
- }
- }
- });
- return num;
- }
- };
- /**
- * ===============================================================================================================
- * ========== 验证入口 =================================================================================
- * ===============================================================================================================
- *
- * */
- $.fn.regattrs = function() {
- $.utilfun.getFormElement($(this));
- var vfresult = $.utilfun.verification();
- if (vfresult) {
- $(this).submit();
- } else {
- $("#point")[0].click();
- }
- };
- /*
- * 单个验证
- */
- $.fn.regattr = function() {
- $(this).blur(function() {
- var elementJson = $.utilfun.createElementJson($(this));
- $.utilfun.doverification(elementJson);
- });
- $(this).find("input[type!='password']").keyup(function() {
- var elementJson = $.utilfun.createElementJson($(this));
- $.utilfun.doverification(elementJson);
- });
- };
- /*
- * 获取光表时提示
- */
- $.fn.prompt = function() {
- $(this).focus(function() {
- var elementJson = $.utilfun.createElementJson($(this));
- if (elementJson.must) {
- $.utilfun.showPrompt(2, elementJson);
- }
- });
- };
- /**
- * ===============================================================================================================
- * ========== 解决xml加载问题 =================================================================================
- * ===============================================================================================================
- *
- * */
- $.xml = function(data) {
- var xmlobj = null;
- if (window.ActiveXObject) {
- var xml;
- xml = new ActiveXObject("Microsoft.XMLDOM");
- xml.async = false;
- xml.loadXML(data);
- xmlobj = $(xml);
- } else {
- xmlobj = $(data);
- }
- return xmlobj;
- };
- //获取节点
- $.getnode = function(key, obj) {
- var nodevalue = obj.children(key).text();
- return nodevalue;
- };
- } (jQuery));
调用方式
- <!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>
- 表单验证
- </title>
- =====引入=======表单验证 js
- </head>
- <body>
- <!-- 锚点 -->
- <a id="aaa" name="aaa">
- </a>
- <!-- 锚点 -->
- <div id="content">
- <div class="content_top">
- <div class="register_jigou">
- 机构用户注册
- </div>
- <div class="content_top_login">
- 我已经注册,现在就
- <a href="/zzlc/jsp/login/login.jsp">
- 登录
- </a>
- </div>
- </div>
- <!-- 表单开始 -->
- <form id="regform" method="post" action="/userregister.go">
- <div class="form_item">
- <span class="label fl">
- 机构简称:
- </span>
- <div class="item_input fl">
- <input disabled="disabled" autocomplete="off" id="reg_companysimplename"
- name="JGJC_SV" type="text" class="text" />
- <input type="hidden" autocomplete="off" id="reg_companysimplename_form"
- name="JGJC_SV" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- 组织机构代码:
- </span>
- <div class="item_input fl">
- <input disabled="disabled" autocomplete="off" id="reg_companycode" name="ZZJGDM_SV"
- type="text" class="text" />
- <input type="hidden" autocomplete="off" id="reg_companycode_form" name="ZZJGDM_SV"
- />
- <a name="ZCDZ_SV">
- </a>
- </div>
- <p class="cuo fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- 机构类别:
- </span>
- <div class="item_input fl">
- <input disabled="disabled" autocomplete="off" id="reg_companytype" name="DWLX_SV"
- type="text" class="text" />
- <input type="hidden" autocomplete="off" id="reg_companytype_form" name="DWLX_SV"
- />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- 注册地址:
- </span>
- <div class="item_input fl">
- <input disabled="disabled" autocomplete="off" id="reg_regaddress" name="ZCDZ_SV"
- type="text" class="text" />
- <input type="hidden" autocomplete="off" id="reg_regaddress_form" name="ZCDZ_SV"
- />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <h3>
- 个人信息
- </h3>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 登录名:
- </span>
- <div class="item_input fl">
- <input id="reg_loginname" fun="_loginname" value="wangjunadmin" name="YHM"
- must="true" type="text" class="text" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <input id="YHMM" value="" type="hidden" name="YHMM">
- </input>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 登录密码:
- </span>
- <div class="item_input fl">
- <input id="reg_pwd" autocomplete="off" value="" type="password" fun="_firstpwd"
- must="true" class="text" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 密码确认:
- </span>
- <div class="item_input fl">
- <input md5="" autocomplete="off" id="reg_secondpwd" value="" fun="_secondpwd"
- must="true" type="password" class="text" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 姓名:
- </span>
- <div class="item_input fl">
- <input name="XM" id="reg_name" value="" must="true" type="text" class="text"
- />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 性别:
- </span>
- <div class="item_input fl" style="text-align: center;">
- <input type="hidden" class="text" value="男" name="XB_SV" id="XB_SV" />
- <select name="XB" id="reg_sex">
- <option value="1">
- 男
- </option>
- <option value="2">
- 女
- </option>
- </select>
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 电话:
- </span>
- <div class="item_input fl">
- <input name="DH" must="true" value="010-888888888" id="reg_tel" fun="_tel"
- type="text" class="text" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 手机:
- </span>
- <div class="item_input fl">
- <input name="PHONE" must="true" value="18610740826" id="reg_phone" fun="_phone"
- type="text" class="text" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 电子邮箱:
- </span>
- <div class="item_input fl">
- <input id="reg_email" fun="_email" value="wj_dreamfly@163.com" name="MAIL"
- must="true" type="text" class="text" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 联系地址:
- </span>
- <div class="item_input fl">
- <input id="reg_homeaddress" name="LXDZ" type="text" value="朝阳区" must="true"
- class="text" />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 部门:
- </span>
- <div class="item_input fl">
- <input id="reg_emp" name="BM" type="text" value="信息部" must="true" class="text"
- />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl">
- <b>
- *
- </b>
- 职务:
- </span>
- <div class="item_input fl">
- <input id="reg_duty" name="ZW" type="text" value="开发" must="true" class="text"
- />
- </div>
- <p class="dui fl">
- </p>
- </div>
- <div class="form_item">
- <span class="label fl" style="color:#FFF">
- 。
- </span>
- <div class="login_btn fl">
- <a href="javascript:void(0)" id="submit">
- <span style="width:270px; line-height:3em; text-align: center; background-image:url(images/regbut1216.png); display:block;color: white; ">
- 提交
- </span>
- </a>
- </div>
- </div>
- </form>
- <!-- 表单结束 -->
- <a href="#aaa" id="point">
- </a>
- </div>
- <div id="footer">
- </div>
- </body>
- </html>
- $(document).ready(function() { $("#point").click();//用锚点自动定位第一个验证失败的表单
- $("#submit").click(function() {//提交按钮 $("#regform").regattrs();//注册方法自动验证表单中所有的元素
- }); $("input").regattr();//失去光标时验证 $("input").prompt();//获取光标是提示信息 });
希望本文所述对大家 jQuery 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0717/329195.html