表单验证 淩亂°似流年 2022-06-04 10:14 264阅读 0赞 angularjs 表单验证,包含必填、手机、邮箱、ip、网址等 基于angularjs自己封装的验证插件,之前的插件在angularjs上就不能使用了,然后将之前的封装的插件,利用指令进行更改,实现了很好的效果。 下载网址: http://download.csdn.net/detail/u012767607/9817349 第一部分:html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>指令directive</title> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" /> <link href="css/special.css" rel="stylesheet" /> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/angular-1.3.0.js"></script> <script src="js/app.js"></script> <script src="js/app/sp.validate.js"></script> <script src="js/app/directive.js"></script> </head> <body> <div class="sp-page-mid" ng-controller="directiveCtrl as ctl"> <div class="sp-page-title">修改成angularjs的验证插件</div> <div class="sp-line-gray"></div> <div class="sp-page-content" id="checkValidate"> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 必填 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-required /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 手机号 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-required sp-phone /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 座机号 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-tel /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 联系电话 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-telephone /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证邮件 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-email /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 身份证号 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-card /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证邮编 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-postcode /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证传真 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-fax /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证网址 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-url /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证IP </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-ip /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 注册用户名 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-username /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证数字 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-digit /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证小数 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-decimal /> </div> </div> <div class="sp-page-box"> <div class="sp-page-boxcolumn span1 sp-line-txt"> 验证中文 </div> <div class="sp-page-boxcolumn span10"> <input type="text" class="sp-input" sp-chinese /> </div> </div> <div class="sp-line-txt sp-center"> <input type="button" value="提 交" class="sp-btn-blue" ng-click="ctl.BtnsubmitCheck()" /> </div> </div> </div> </body> </html> 第二部分: sp.validate.js var spvalidate = window.NameSpace || \{\}; // 表单验证,利用class名来获取对象 spvalidate.addlblError = function (obj) \{ var lblError = "<label class='sp-error'></label>"; if ($(obj).parent().children(".sp-error").length < 1) \{ $(obj).after(lblError); $(obj).parent().addClass('sp-nowrap'); \} \} // 整合验证 spvalidate.getblur = function (obj, regex, tip) \{ var className = $(obj).attr('class'); var str = $.trim($(obj).val()); var strReg = !!str.match(regex); if (str != "" && strReg == false) \{ $(obj).next("label").show().html(tip); $(obj).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo'); $(obj).focus(); return false; \} else if (str != "" && strReg == true) \{ $(obj).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo"); $(obj).next("label").hide().html(""); \} if (className.indexOf('require') == -1) \{ if (str == "") \{ $(obj).removeClass('sp-errorTip').removeClass('sp-errorLogo'); $(obj).next("label").hide().html(""); \} \} \} //1.验证必填 sp-required app.directive("spRequired", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).addClass("require").addClass("sp-requireLogo"); $(elem).blur(function () \{ var newVal = $.trim($(this).val()); if (newVal == "") \{ $(this).next("label").show().html("必填"); $(this).addClass('sp-errorTip').removeClass('sp-requireLogo').removeClass('sp-rightLogo').addClass('sp-errorLogo'); \} else \{ $(this).next("label").hide().html(""); $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo'); \} \}); \} \} \}); //2.验证手机号 sp-phone app.directive("spPhone", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^(0|86|17951)?(13\[0-9\]|15\[012356789\]|17\[678\]|18\[0-9\]|14\[57\])\[0-9\]\{8\}$/; spvalidate.getblur(elem, regex, "手机号错误"); \}); \} \} \}); //3.验证座机号码 sp-tel app.directive("spTel", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^(?:(?:0\\d\{2,3\})-)?(?:\\d\{7,8\})(-(?:\\d\{3,\}))?$/; spvalidate.getblur(elem, regex, "座机号错误"); \}); \} \} \}); //4.验证联系电话 sp-telephone app.directive("spTelephone", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var tel = $.trim($(this).val()); if (tel.substring(0, 1) == 1) \{ var regex = /^(0|86|17951)?(13\[0-9\]|15\[012356789\]|17\[678\]|18\[0-9\]|14\[57\])\[0-9\]\{8\}$/; spvalidate.getblur(this, regex, "手机号错误"); \} else \{ var regex = /^(?:(?:0\\d\{2,3\})-)?(?:\\d\{7,8\})(-(?:\\d\{3,\}))?$/; spvalidate.getblur(this, regex, "座机号错误"); \} \}); \} \} \}); //5.验证邮箱 sp-email app.directive("spEmail", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /\\w+(\[-+.\]\\w+)\*@\\w+(\[-.\]\\w+)\*\\.\\w+(\[-.\]\\w+)\*/; spvalidate.getblur(elem, regex, "邮箱错误"); \}); \} \} \}); //6.验证身份证号 sp-card app.directive("spCard", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^\[1-9\]\\d\{7\}((0\\d)|(1\[0-2\]))((\[0|1|2\]\\d)|3\[0-1\])\\d\{3\}$|^\[1-9\]\\d\{5\}\[1-9\]\\d\{3\}((0\\d)|(1\[0-2\]))((\[0|1|2\]\\d)|3\[0-1\])\\d\{3\}(\[0-9\]|X)$/; spvalidate.getblur(elem, regex, "身份证错误"); \}); \} \} \}); //7.验证邮编 sp-postcode app.directive("spPostcode", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^\[0-9\]\[0-9\]\{5\}$/; spvalidate.getblur(elem, regex, "邮编错误"); \}); \} \} \}); //8. 验证传真 sp-fax app.directive("spFax", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^(?:(?:0\\d\{2,3\})-)?(?:\\d\{7,8\})(-(?:\\d\{3,\}))?$/; spvalidate.getblur(elem, regex, "传真号错误"); \}); \} \} \}); //9.验证网址 sp-url app.directive("spUrl", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /((https|http|ftp|rtsp|mms):\\/\\/)?((\[0-9a-z\_!~\*'().&=+$%-\]+:)?\[0-9a-z\_!~\*'().&=+$%-\]+@)?((\[0-9\]\{1,3\}\\.)\{3\}\[0-9\]\{1,3\}|(\[0-9a-z\_!~\*'()-\]+\\.)\*(\[0-9a-z\]\[0-9a-z-\]\{0,61\})?\[0-9a-z\]\\.\[a-z\]\{2,6\})(:\[0-9\]\{1,4\})?((\\/?)|(\\/\[0-9a-z\_!~\*'().;?:@&=+$,%\#-\]+)+\\/?)/g; spvalidate.getblur(elem, regex, "网址错误"); \}); \} \} \}); //10.验证IP地址 sp-ip app.directive("spIp", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^\\d+\\.\\d+\\.\\d+\\.\\d+$/; spvalidate.getblur(elem, regex, "ip地址错误"); \}); \} \} \}); //11.验证用户名合法 sp-username app.directive("spUsername", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^(?!\[^a-zA-Z\]+$)(?!\\D+$).\{5,20\}$/; spvalidate.getblur(elem, regex, "用户名必须由5-20位字母、数字组成"); \}); \} \} \}); //12.验证数字 sp-digit app.directive("spDigit", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^\[0-9\]\*$/; spvalidate.getblur(elem, regex, "请输入数字"); \}); \} \} \}); //13.验证小数 sp-decimal app.directive("spDecimal", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^\\d+(\\.\\d+)?$/; spvalidate.getblur(elem, regex, "请输入数字或小数"); \}); \} \} \}); //14.验证中文 sp-chinese app.directive("spChinese", function () \{ return \{ restrict: "A", link: function (scope, elem, attrs) \{ spvalidate.addlblError(elem); $(elem).blur(function () \{ var regex = /^\[\\u4E00-\\u9FFF\]+$/; spvalidate.getblur(elem, regex, "请输入中文"); \}); \} \} \}); //提交时检测 所需要验证的 控件是否合法, 不合法就不能通过 spvalidate.submitCheck = function (formID) \{ /// <summary>提交时检测form表单格式的合法性</summary> var result = true; $(formID + " label.sp-error").each(function () \{ var getClass = $(this).prev().attr("class"); //获取当前节点的前一个节点 if (getClass.indexOf("require") != -1) \{ //如果含有require必填 //含有必填,其值为空时 if ($(this).prev().val() == "" || $(this).prev().val() == null) \{ if ($(this).is(":hidden")) \{ $(this).show().html("必填"); $(this).prev().addClass('sp-errorTip').removeClass('sp-requireLogo').addClass('sp-errorLogo'); \} result = false; \} if ($(this).prev().val() != "") \{ if ($(this).is(":visible")) \{ result = false; \} \} \} //如果不是必填,但含有其他验证 时 if (getClass.indexOf("require") == -1) \{ if ($(this).prev().val() != "") \{ if ($(this).is(":visible")) \{ result = false; \} \} \} \}); $(formID + " .sp-error:visible:eq(0)").prev().focus(); //将焦点定位到第一个sp-error所属的文本框中 return result; \}
相关 js验证表单 |-- form表单 <form action="<%=path%>/search" method="post" οnsubmit="return checkAll()"> 末蓝、/ 2022年09月24日 15:29/ 0 赞/ 260 阅读
相关 表单验证 应用 一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu 朱雀/ 2022年07月24日 06:28/ 0 赞/ 442 阅读
相关 表单验证 java script验证表单时常用: "^-\[0-9\]\\[1-9\]\[0-9\]\$" //负整数 "^-?//d+$" //整 ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 273 阅读
相关 表单验证 @Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 / ╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 271 阅读
相关 表单验证 angularjs 表单验证,包含必填、手机、邮箱、ip、网址等 基于angularjs自己封装的验证插件,之前的插件在angularjs上就不能使用了,然后将之前的封 淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 265 阅读
相关 表单验证 表单验证为了减轻服务器的压力,请求次数减少,保证用户输入符合要求。 > 常用的表单验证 > \- 日期样式 > \- 表单内容是否为空 > \- 用户名和密码 梦里梦外;/ 2022年05月24日 04:40/ 0 赞/ 276 阅读
相关 Laravel 表单验证 检查应用程序的基底控制器 (App\\Http\\Controllers\\Controller) 类你会看到这个类使用了 ValidatesRequests trait。这个 曾经终败给现在/ 2022年03月22日 10:37/ 0 赞/ 375 阅读
相关 表单验证 java script验证表单时常用: "^-\[0-9\]\\[1-9\]\[0-9\]\$" //负整数 "^-?//d+$" //整 小灰灰/ 2022年01月07日 14:35/ 0 赞/ 415 阅读
相关 Layui表单验证 1:引用layui的两个文件: 2:因为是表单验证,所以只有在表单里面才起效果,先来布局:首先,放一个最外层的盒子把所有元素包裹起来,容易布局,引用layui的一个类:‘ay Myth丶恋晨/ 2021年12月04日 07:11/ 0 赞/ 416 阅读
还没有评论,来说两句吧...