zoukankan      html  css  js  c++  java
  • angularJS中的表单验证(包括自定义验证)

    表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏。Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用,进而在客户端验证时提供表单状态的实时反馈。

    要使用表单验证,首先保证表单有一个name属性,一般的输入字段如最大,最小长度等,这些功能由html5表单属性提供,如果我们想屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记。

    表单基本格式如下:

    <form name="form" novalidate>
            <label for="email">你的邮箱:</label>
            <input type="email" name="email" id="email" ng-model="user.email" placeholder="邮箱地址">
    </form>

    当然在input元素上还可以使用很多验证选项,比如:
    1.必填项,设置某个表单输入是否已经填写,只需要在输入字段元素上添加require标记即可。

    <input type="text" required>

    2.最小(大)长度,验证表单输入的文本长度是否大于某个最小值,可以使用ng-minlength指令(ng-maxlength指令)

    <input type="text" ng-minlength="5" ng-maxlength>

    3.模式匹配,使用ng-pattern来确保输入匹配指定的正则表达式

    <input type="text"  ng-pattern="/^[a-zA-Z]$/">

    4. 电子邮件,只需要把input的类型设置为email即可

    <input type="email" name="email" ng-model="user.email" >

    5.数字,只需要将input的类型设置为number

    <input type="number" name="age" ng-model="user.age">

    6.URL,将input的类型设置为url

     
    <input type="url" name="homepage" ng-modle="user.url">

    7.自定义验证,在实际项目中我们通常会遇到比较复杂的验证,这时我们可以采用自定义验证。自定义验证使用的是自定义指令的方式,处理表单输入的内容,将结果转化为布尔值从而进行验证。比如我们需要向后台请求数据来判断用户名是否有效:

    Html:

     
    <input type="text" placeholder="username" name="usrename" ng-model="user.username" check-username="username">

    自定义指令部分:(只是一个简单的势力)

    app.directive('checkUsername', function($http){
    
                                return {
    
                                         require: 'ngModel',
    
                                         link: function(scope, ele, attrs, c){
    
                                                   scope.$watch(attrs.ngModel, function(n){
    
                                                            if(!n) return;
    
                                                            $http({
    
                                                                     method: 'POST',
    
                                                                     url: '/api/check/' + attrs.username,
    
                                                                     data:{
    
                                                                               field: attrs.username,
    
                                                                               value: scope.ngModel
    
                                                                     }
    
                                                            }).success(function(data){
    
                                                                     c.$setValidity('unique', data.isUnique);
    
                                                            }).error(function(data){
    
                                                                     c.$setValidity('unique', false);
    
                                                            })
    
                                                   });
    
                                         }
    
                                }
    
                       });

    通过指令返回unique的布尔值来决定显示的警告信息。

    由于表单的属性可以在其$scope对象中访问到,而我们又可以直接访问到$scope,因此js可以间接的访问DOM的表单属性,借助这些属性,我们可以对表单做出实时响应。

    这些属性有:

    1. 未修改的表单,用来判断用户是否修改了表单,如果修改了则为true,未修改则为false。

    formName.inputFieldName.$pristine

    2. 修改过的表单,只要用户修改过表单,无论输入是否通过验证,该值都将返回true

    1. formName.inputFieldName.$dirty

    3. 合法的表单,这个属性是用来判断表单的内容是否合法的,如果合法则该属性的值为true

    formName.inputFieldName.$valid

    4. 不合法的表单,这个属性与上个属性正好相反,如果不合法,则该属性值为true

    formName.inputFieldName.$invalid

    5. 错误,$error对象包含了当前表单的所有验证内容,以及它们是否合法的信息,如果验证失败,该属性值为true,如果验证成功,则该值为false

    formName.inputFieldName.$error

    表单验证的基础部分暂时就这些,剩下的明天补上。

  • 相关阅读:
    jQuery使用(十三):工具方法
    jQuery使用(十二):工具方法之type()之类型判断
    马化腾成中国新首富:一个多月身家增长77亿美元
    滴滴:设立1000万美元专项基金,援助海外司机骑手
    疫情查询
    自动获取时间html代码
    搜索引擎你还用百度吗?为什么?
    实现QQ内打开链接跳转至浏览器
    QQ靓号资料空白且空间开通教程
    斐波那契数列计算html代码
  • 原文地址:https://www.cnblogs.com/3Lweb/p/6436114.html
Copyright © 2011-2022 走看看