AngularJs 表单验证

最新推荐文章于 2019-09-16 17:14:10 发布
最新推荐文章于 2019-09-16 17:14:10 发布
阅读量304 收藏
点赞数
分类专栏： AngularJs 文章标签： angularjs 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013758456/article/details/77866112
版权

angularjs 表单验证，包含必填、手机、邮箱、ip、网址等

基于angularjs自己封装的验证插件，之前的插件在angularjs上就不能使用了，然后将之前的封装的插件，利用指令进行更改，实现了很好的效果。

第一部分：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;
}


峰沙同行
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS 表单（ng-form）验证
分享技术，共建开放平台
08-12 3万+
在HTML中，用户通过input, select, textarea等元素进行输入，我们通常用表单来包装和管理这些控件。客户端表单验证非常重要，可以及时地为用户提供表单验证信息。但客户端表单验证只是为了增强用户体验，服务器端验证仍然是必要的。 AngularJS最大的特点便是数据绑定。利用Angular在客户端脚本中构建MVC框架，Model和View之间可以实现双向绑定。因此Angular
AngularJS - 表单验证
seaalan的博客
01-09 225
&lt;form role="form" name="addStaffForm"&gt; &lt;div ng-init="vm.current.form = addStaffForm" class="form-group" ng-class="{ 'has-error' : addStaffForm.email.$invalid &amp;&amp;
angularJs表单校验（超级详细！！！）
07-05 473
html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <...
IP地址的正则表达式，用于angularJS
穆离的博客
09-01 1201
作为笔记
Angular 6 自定义校验器校验身份证
weixin_30538029的博客
01-17 551
/** * 自定义身份校验器 * */ import { FormControl} from '@angular/forms'; export function identityNoValidator(input: FormControl) { const value = input.value; if (checkCode(value)) { ...
angular写的身份证校验规则（省份生日性别）手机号校验 。直接贴代码
qq_38904099的博客
09-25 2300
(function() { 'use strict'; angular.module('app.house') .controller('HotelOrderCtrl', HotelOrderCtrl); HotelOrderCtrl.$inject = ['$scope', '$ionicHistory','$state','$stateParams','houseSer...
angularjs表单验证
触不到的颜色是否叫彩虹的博客
06-13 232
常用的表单验证指令 　　1. 必填项验证 　　某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： 　　 　　2. 最小长度 　　验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= “{number}”： 　　 　　3. 最大长度 　　验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxle
AngularJS表单验证
11-03
在AngularJS中，表单验证是一项关键功能，它允许开发者实时检查用户输入的数据，确保其符合预期的格式和规则，从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的，这使得它在处理复杂...
AngularJs表单验证实例详解
10-22
本文将深入探讨AngularJS表单验证的实例和常见验证指令。 1. **必填项验证**：通过在HTML5的输入字段上添加`required`属性，可以检查用户是否填写了该字段。例如： ```html ``` 如果用户未填写此字段，表单将...
AngularJS表单验证功能
10-19
主要为大家详细介绍了AngularJS表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS表单验证功能分析
10-19
主要介绍了AngularJS表单验证功能,结合具体实例形式分析了AngularJS表单验证的操作步骤、实现技巧与相关注意事项,需要的朋友可以参考下
angularjs表单验证Demo
01-07
AngularJS是前端开发流行框架，本Demo展示了表单验证的意义，及实现方法，掌握Angular基础指令，通过不同的指令元素可以拥有不同功能，并通过指令与表单合作验证，从而实现表单验证的敏捷化开发。
IP地址大小的校验方法
chenqk_123的专栏
09-16 1201
核心思想，就是讲地址段截分为四段，分段去比较大小 ipChecked.js //比较两个IP地址的大小 const compareIp = (startIP, endIP) => { var temp1; var temp2; temp1 = startIP.split("."); temp2 = endIP.split("."); for (v...
angular7自定义表单验证一
my_love_download的博客
08-16 1535
1.创建FormBuilder 2.html 3.自定义表单验证 4.使用正则表达式进行验证身份证号 this.staffIslandsForm=this.$fb.group({ IDCard:['',[Validators.required,Validators.pattern(/^[1-9]\d{5}(18|19|20)\d{2}...
2017最佳经典之作-AngularJs 中select 下拉多选
u013758456的专栏
07-25 8231
1.问题：在AngularJs前台页面中 实现下拉多选问题 2.解析：checkbox 多选框，ng-repeat="user in users" 3.解决方案： class="row clearfix" style="margin-top: 5px"> class="col-xs-4 control-label">爱好选择： class="col-xs-8" style="
AngularJs 最新验证手机号码，成功测试通过
u013758456的专栏
07-21 6292
name="signUpForm" novalidate> class="form-group"> class="row clearfix"> for="tel1" class="col-xs-12" style="text-align: left">L张蒙号码1： style="text-align: center" class="col-xs-12">
angular中的ng-if和ng-show的区别以及ng-if问题
u013758456的专栏
10-30 4070
    使用ng-if,在需要的时候,再去创建这个dom节点， 结果就是插件初始化成功了，但是ng-model的值取不到了。    用ng-show去判断浮动框的显示与否，插件初始化又不成功了， 以前使用这两个的时候, 知道 ng-if是通过判断表达式的值为true或false 来决定是否创建dom节点， ng-show是通过判断表达式的值 用css的display:none和di...
AngularJs Module init中使用sequelize创建数据库表
u013758456的专栏
07-31 1121
一、 问题：sequelize 自动创建数据库表？ 二、 分析：在Module init function里面，借助sequelize工具实现创建自己的表 ， 1.首先，需要在server/models/LZM.server.model.js 中  创建表模型；如下所示： 'use strict'; module.exports = function (sequelize, DataTyp
最新版：js保留两位小数，10.22%
u013758456的专栏
08-15 921
查找javascript的功能，number类型有一个toFixed()函数， 测试用例: 效率 alert((0.9996*100).toFixed(2));  使用Number.toFixed()可以格式数字显示任意的小数位！ sequelize.query(sql, {type: sequelize.QueryTypes.SELECT})
AngularJs 表单提交按钮状态
最新发布
05-31
在 AngularJS 中，可以通过设置表单提交按钮的状态来防止用户多次提交表单。可以使用 `ng-disabled` 指令来控制提交按钮的状态，该指令可以绑定到表单的状态上。例如，可以在表单被提交时将按钮禁用，然后在表单处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值