angularjs 表單驗證，包含必填、手機、郵箱...
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;
}
相關文章
- php正則驗證手機、郵箱PHP
- js正規表示式驗證手機，郵箱，身份證JS
- angularjs表單驗證AngularJS
- 表單驗證<AngularJs>AngularJS
- iOS使用UIDataDetectorType簡單驗證手機號、郵箱、網址iOSUI
- swift 郵箱、密碼、手機號、身份證驗證正則Swift密碼
- js驗證郵箱JS
- Javascript郵箱驗證JavaScript
- iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法View物件巢狀陣列
- gitlab郵箱驗證 郵箱提醒設定Gitlab
- JavaScript郵箱格式驗證JavaScript
- 走進AngularJs(九)表單及表單驗證AngularJS
- ng1.3+表單驗證<AngularJs>AngularJS
- jQuery驗證手機號郵箱身份證的正規表示式（含港澳臺）jQuery
- 郵箱格式驗證程式碼
- PHP中的郵箱驗證PHP
- 如何使用angularjs實現表單驗證AngularJS
- antd4表單手機號驗證
- 驗證手機、郵箱、漢字、身份證、URL、IP地址等java程式碼工具類Java
- jQuery郵箱格式驗證程式碼jQuery
- 使用telnet命令驗證郵箱
- qq郵箱收不到epic驗證郵件怎麼辦 epic郵箱驗證沒反應怎麼辦
- Java實現郵箱驗證碼功能Java
- 郵箱地址正規表示式驗證
- 郵箱格式驗證程式碼例項
- 郵箱格式驗證程式碼詳解
- 直播app原始碼，驗證方式選擇郵箱驗證時，自動給輸入好的郵箱傳送驗證碼APP原始碼
- Android註冊功能--電話驗證和郵箱驗證Android
- Laravel 專案實現郵箱驗證功能Laravel
- 正規表示式驗證郵箱及其解析
- 郵箱驗證正規表示式程式碼
- javascript驗證郵箱格式程式碼例項JavaScript
- vue.js帳號，密碼，郵箱和移動手機號碼正則驗證Vue.js密碼
- 表單驗證手機號碼格式例項程式碼
- jQuery 表單驗證 學習手記jQuery
- js實現的郵箱格式驗證程式碼JS
- 手機號/郵箱 用*替代實現
- AngularJS教程十九—— 表單校驗AngularJS