angularjs 表单验证，包含必填、手机、邮箱...
2017-04-18 09:41
477 查看
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-requi
e4c2
red
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;
}
基于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-requi
e4c2
red
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验证 正则表达式 包含手机号码、座机号码、电子邮箱、密码、姓名、身份证号码等表单数据的验证
- java正则表达式表单验证类工具类(验证邮箱、手机号码、qq号码等)
- layui 表单验证案例文本框，手机，邮箱，textarea等格式的验证 <script src="layui/layui.js"></script> <script src="layui/lay
- javaScript 验证 电话号码（包含 手机和座机） 和邮箱验证
- QTP实例：新增用户实例，包含邮箱、手机号码的验证，还判断了添加账户是否已存在数据库的问题
- java正则表达式表单验证类工具类(验证邮箱、手机号码、qq号码等)
- HTML5新特性---Form表单前台通过正则表达式自动验证邮箱
- AngularJS - 表单验证
- angularJS表单验证
- js正则验证邮箱，手机号码
- AngularJs表单验证实例1
- js正则表达式:验证邮箱格式、密码复杂度、手机号码、QQ号码(未测试)
- android ip地址，手机号码，邮箱格式验证
- 邮箱和手机号码正则表达式验证(手机号码支持188)-HTML-XHTML-CSS
- JS和正则表达式验证手机号码、邮箱等
- 【电商网站】邮箱地址及手机验证代码分析
- js正则表单验证汇总，邮箱验证，日期验证，电话号码验证，url验证，信用卡验证，qq验证
- 正则表达式验证格式 手机、邮箱、字符串
- 正则表达式 验证 电话，手机，邮箱，数字
- 详解AngularJS实现表单验证