angular中的表单验证

angular中的表单验证很强大,

一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error.

$valid-----当验证通过的时候,为true,不通过的时候为false

$invalid----当验证不通过的时候,为true,通过的时候为true

$pristine---当值为初始值的时候,为true,一旦有过改动即为false

$dirty---当值有改动过即为true,其他即为false

$error---包含所有的验证信息,如以下例子,$error = {required:false,minlength:false,pattern:false}。哪条验证不通过,它的值就为true。

以上五个值可以通过表单的name来获取到,参考如下:

<form novalidate name="myForm">
<input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
<div>{{ myForm.myText.$valid }}</div>
<div>{{ myForm.myText.$invalid }}</div>
<div>{{ myForm.myText.$pristine }}</div>
<div>{{ myForm.myText.$dirty }}</div>
<div>{{ myForm.myText.$error }}</div>
</form>

可以结合ng-repeat filter $error等来做一些表单验证

<script>
var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
    $scope.text = ‘hello‘;
    $scope.regText = {
        regT : ‘default‘,
        regList : [
           { name : ‘default‘, text : ‘请输入用户名‘ },
           { name : ‘required‘, text : ‘不能为空‘ },
           { name : ‘pattern‘, text : ‘只能为字母‘ },
           { name : ‘pass‘, text : ‘√‘ },
        ],
        change : function(err){
            console.log(err);
            for(var attr in err){
                if(err[attr]==true){
                    $scope.regText.regT = attr;
                    return;
                }
            }
            $scope.regText.regT = ‘pass‘;
        }
    };
}]);
</script>
</head>

<body>
<div ng-controller="Aaa">
    <form novalidate name="nForm">
        <label>用户名:
            <input type="text" name="nText" ng-model="regText.name" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/" ng-blur="regText.change(nForm.nText.$error)">
            <span ng-repeat="re in regText.regList | filter:regText.regT ">{{re.text}}</span>
        </label><br><br>
        <label>密码:
            <input type="password" name="nPas" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
            <span>请输入密码</span>
        </label>
    </form>
</div>

  

时间: 2024-08-01 13:12:46

angular中的表单验证的相关文章

angularjs中的表单验证

angular对html原生的form做了封装,增加了很多验证功能 1.代码结构 <form name="signup_form" novalidate ng-submit="signupForm()"> <div> <label>用户名</label> <input type="text" placeholder="Name" name="name"

jq中的表单验证插件------jquery.validate

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段(2)email:true                  必须输入正确格式的电子邮件(3)date:true               

jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法

使用bootstrap遇到表单校验,最常用的一款表单校验插件 github地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用: 将文件下载 或者用 git clone下来 1.引入css到head中,引入js到body结束标签的前面即可 提示: 默认是英语的,需要变成中文: 将github中dist中的\js\language\zh_CN.js 引入文件中即可 官方完整实例版: <!DOCTYPE html> <html>

Model中设置表单验证方法

Model类里面定义$_validate属性支持的验证因子格式: 格式:array(验证字段,验证规则,错误提示,验证条件,附加规则,验证时间). 验证条件: (1)Model::EXISTS_TO_VAILIDATE 或者0 存在字段就验证 (默认)   (2)Model::MUST_TO_VALIDATE 或者1 必须验证    (3)Model::VALUE_TO_VAILIDATE或者2 值不为空的时候验证   另外还有其他的验证规则语法:配合验证规则可使用 (1)regex 使用正则进

element中修改表单验证的提示信息的样式

.el-form-item--small .el-form-item__error { margin-top: 2px; } .el-form-item__error { position: absolute !important; top:16px; text-align: center; background-color: red; filter: alpha(Opacity=40); opacity: 0.4; width: 120px; height: 21px; border-radi

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

angular表单验证实例----可用的代码

前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的

Django中的Form表单验证

回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错误信息的字典,并会遍历类的所有属性(对应前端待验证的输入域),调用各自的验证方法,将错误信息(两类,必要与否以及格式正确与否)存入字典,并得出最终的验证结果.在使用时,需要定义继承自Form基类不同的Form类,以对应有着不同输入域的Form表单.在拿到前端给的字典前,要先初始化自定义From类,直

AngularJS表单验证实现方法详解

本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实例代码 <!doctype html> <html ng-app="lesson" ng-controller="FormCtrl" > <head> <meta http-equiv="Content-Type&qu