基于angularJS的表單驗(yàn)證指令介紹
做開發(fā)這么久一直被表單驗(yàn)證這個(gè)看似簡(jiǎn)單又不簡(jiǎn)單的東西搞得非常煩躁,于是寫了個(gè)表單驗(yàn)證的框架,再也不用擔(dān)心這個(gè)心煩的驗(yàn)證了。
這里使用AngularJS的指令進(jìn)行處理代碼及其簡(jiǎn)潔明了
下面是指令JS代碼
app.directive('ccForm',['$parse',function ($parse) {
return {
restrict:'A',
link:function (scope,element,attrs) {
var first=true;
var errors=0;
var checkInterval;
function showError(input,errorIndex) {
if(first){
errors++;
$parse(element.attr('cc-form')).assign(scope,false);
refreshScope(scope);
return;
}
input.addClass('hasError');
input.closest('.form-group').addClass('hasError');
input.next('.help-block').find('.cc-show').removeClass('cc-show');
input.next('.help-block').find('[cc-error-'+errorIndex+']').addClass('cc-show');
input.closest('.form-group').next('.help-block').find('.cc-show').removeClass('cc-show');
input.closest('.form-group').next('.help-block').find('[cc-error-'+errorIndex+']').addClass('cc-show');
}
function hidError(input,errorIndex) {
errors--;
if(errors==0){
$parse(element.attr('cc-form')).assign(scope,true);
refreshScope(scope);
}
input.removeClass('hasError');
input.closest('.form-group').removeClass('hasError');
input.next('.help-block').find('[cc-error-'+errorIndex+']').removeClass('cc-show');
input.closest('.form-group').next('.help-block').find('[cc-error-'+errorIndex+']').removeClass('cc-show');
}
function checkInput(input) {
var that=$(input);
// $('[cc-email]')[0].attributes[0].name
var attrs=input.attributes;
var value=that.val();
for(var i=0,attr;attr=attrs[i];i++){
if(attr.name=='cc-email'){
if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)){
hidError(that,attr.value)
}else{
showError(that,attr.value);
break;
}
}else if(attr.name=='cc-phone'){
if(/\d{11}/.test(value)){
hidError(that,attr.value);
}else {
showError(that,attr.value);
break;
}
}else if(attr.name=='cc-max'){
if(value.length>attr.value){
showError(that,that.attr(attr.name+'-error'));
break;
}else {
hidError(that,that.attr(attr.name+'-error'));
}
}else if(attr.name=='cc-min'){
if(value.length<attr.value){
showError(that,that.attr(attr.name+'-error'));
break;
}else {
hidError(that,that.attr(attr.name+'-error'));
}
}else if(attr.name=='cc-regex'){
var patten=new RegExp(attr.value);
if(patten.test(value)){
hidError(that,that.attr(attr.name+'-error'));
}else {
showError(that,that.attr(attr.name+'-error'));
break;
}
}else if(attr.name=='cc-require'){
if(!value||value.trim()==''){
showError(that,attr.value);
break;
}else {
hidError(that,attr.value);
}
}
}
}
function checkForm(form) {
form.find('input,textarea').each(function () {
checkInput(this);
});
}
element.find('input,textarea').focus(function (e) {
var that=this;
first=false;
checkInterval=setInterval(function () {
checkInput(that);
},500);
});
element.find('input,textarea').blur(function (e) {
first=false;
checkInput(this);
clearInterval(checkInterval);
});
element.find('[cc-submit]').click(function (e) {
first=false;
clearInterval(checkInterval);
checkForm(element);
});
//預(yù)檢測(cè)時(shí)不顯示錯(cuò)誤提示
checkForm(element);
}
}
}]);
對(duì)應(yīng)的需要一點(diǎn)點(diǎn)CSS代碼,下面是用LESS寫的
.help-block {
* {
&:not(.cc-show) {
display: none;
}
}
}
對(duì)應(yīng)的CSS就是
.help-block *:not(.cc-show) {
display: none;
}
用法1
<div>
<h1>test</h1>
<form cc-form="form1">
<div class="from-group">
<input type="password" ng-model="user.password" cc-max="16" cc-max-error="1" cc-min="6" cc-min-error="2">
<div class="help-block">
<p cc-error-1>密碼長度不能超過16位</p>
<p cc-error-2>密碼最短為6</p>
</div>
</div>
<div class="form-group">
<input ng-model="user.phone" cc-regex="\d{11}" cc-regex-error="1">
<div class="help-block">
<p cc-error-1>請(qǐng)輸入正確的手機(jī)號(hào)</p>
</div>
</div>
<div class="form-group">
<input ng-model="user.fax" cc-require="1">
<div class="help-block">
<p cc-error-1>請(qǐng)輸入傳真</p>
</div>
</div>
<div class="form-group">
<input ng-model="user.email" cc-email="1">
<div class="help-block">
<p cc-error-1>請(qǐng)輸入正確的郵箱</p>
</div>
</div>
<button type="button" cc-submit>提交</button>
</form>
</div>
用法2
<form class="form shadow-box" cc-form="form1">
<h3>登錄</h3>
<div class="form-group">
<div class="cellphone">
<input placeholder="手機(jī)號(hào)" ng-model="user.loginName" name="loginName" cc-regex="\d{11}" cc-regex-error="1" cc-require="2"/>
</div>
</div>
<div class="help-block">
<p cc-error-1>請(qǐng)輸入正確的手機(jī)號(hào)</p>
<p cc-error-2>請(qǐng)輸入手機(jī)號(hào)</p>
</div>
<div class="form-group">
<div class="password">
<input placeholder="密碼" type="password" ng-model="user.password" name="password" cc-require="1"/>
</div>
</div>
<div class="help-block">
<p cc-error-1>請(qǐng)輸入密碼</p>
</div>
<div class="form-group">
<div class="vcode">
<input placeholder="驗(yàn)證碼" ng-model="user.vcode" name="vcode" cc-require="1">
<img src="">
</div>
</div>
<div class="help-block">
<p cc-error-1>請(qǐng)輸入驗(yàn)證碼</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="user.rememberPass" ng-true-value="true" ng-false-value="false">自動(dòng)登錄
</label>
</div>
<p class="to-register">沒有賬號(hào)?<a href="#/main/register">立即注冊(cè)</a></p>
<button type="button" ng-click="login(1)" cc-submit>登錄</button>
</form>
如此簡(jiǎn)潔明了
以上就是小編為大家?guī)淼幕赼ngularJS的表單驗(yàn)證指令介紹全部?jī)?nèi)容了,希望大家多多支持腳本之家~
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
- AngularJS使用angular-formly進(jìn)行表單驗(yàn)證
- AngularJS手動(dòng)表單驗(yàn)證
- AngularJS自動(dòng)表單驗(yàn)證
- AngularJS實(shí)現(xiàn)表單驗(yàn)證功能
- AngularJS表單驗(yàn)證功能分析
- 基于AngularJS實(shí)現(xiàn)表單驗(yàn)證功能
- AngularJS學(xué)習(xí)筆記之表單驗(yàn)證功能實(shí)例詳解
- AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能示例
相關(guān)文章
深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJS中的ng-bind-html指令和$sce服務(wù),對(duì)大家學(xué)習(xí)AngularJS具有一定參考借鑒價(jià)值,有需要都可以參考學(xué)習(xí)。2016-09-09
Angular4學(xué)習(xí)教程之DOM屬性綁定詳解
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之DOM屬性綁定的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
詳解在Angular項(xiàng)目中添加插件ng-bootstrap
這篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加插件 ng-bootstrap,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Bootstrap和Angularjs配合自制彈框的實(shí)例代碼
今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實(shí)例代碼,代碼簡(jiǎn)單易懂,有需要的朋友跟著小編一起學(xué)習(xí)2016-08-08
AngularJS動(dòng)態(tài)生成select下拉框的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于AngularJS動(dòng)態(tài)生成select下拉框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
AngularJS 將再發(fā)布一個(gè)重要版本 然后進(jìn)入長期支持階段
目前團(tuán)隊(duì)正在開發(fā) AngularJS 1.7.0,而 1.7 的開發(fā)周期將一直持續(xù)到 2018 年 6 月 30 日2018-01-01
Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問題解決
這篇文章主要給大家介紹了關(guān)于Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12

