AngularJs表单验证功能

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){

    $scope.regText = {
        regVal : ‘default‘,
        regList : [
            { name : ‘default‘ , tips : ‘请输入用户名‘},
            { name : ‘required‘ , tips : ‘用户名不能为空‘},
            { name : ‘pattern‘ , tips : ‘用户名必须是字母‘},
            { name : ‘pass‘ , tips : ‘√‘}
        ]
    };

    $scope.regPassword = {
        regVal : ‘default‘,
        regList : [
            { name : ‘default‘ , tips : ‘请输入密码‘},
            { name : ‘required‘ , tips : ‘密码不能为空‘},
            { name : ‘minlength‘ , tips : ‘密码至少6位‘},
            { name : ‘pass‘ , tips : ‘√‘}
        ]
    };

    $scope.change = function( reg , err ){
        for(var attr in err){
            if( err[attr] == true ){
                $scope[reg].regVal = attr;
                return;
            }
        }
        $scope[reg].regVal = ‘pass‘;
    };

}]);

</script>
</head>

<body>
<div ng-controller="Aaa">
    <form novalidate name="nForm">
        <div>
            <label>用户名:</label>
            <input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change(‘regText‘,nForm.nText.$error)">
            <span ng-repeat=" re in regText.regList | filter : regText.regVal ">{{ re.tips }}</span>
        </div>
        <div>
            <label>密码:</label>
            <input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change(‘regPassword‘,nForm.nPassword.$error)">
            <span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">{{ re.tips }}</span>
        </div>
    </form>
</div>
</body>
</html>
时间: 2024-10-03 23:00:47

AngularJs表单验证功能的相关文章

ajax实现登陆表单验证功能

ajax实现登陆表单验证功能:使用ajax进行表单登陆验证功能更为的人性化,下面提供一个表单验证的实例代码,代码较为简单,仅仅作为演示之用而已,多实用的ajax表单验证功能都较为复杂.下面分布分出代码:一.静态页面表单部分代码: <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <scri

AngularJs表单验证

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3. 最大长

AngularJs 表单验证

看到一些博客说这个框架要过时了,但是还是学习了下,觉的很方便的一个框架,有空的同学可以看看,适合我们入门看,比较基础. 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "

jQuery Validate 插件,表单验证功能

连接地址:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jör

AngularJS表单验证实现方法详解

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

AngularJS表单验证,手动验证或自动验证

AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元素加上novalidate="novalidate":2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"&g

AngularJS 表单验证小结

注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type="text" required> 2.最大长度,最小长度 为input加上ng-maxlength或者ng-minlength属性,并且属性值为需要设置的长度,例如: <input type="text" ng-minlength="5"

angularjs 表单验证(不完整版)

针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: <form ng-submit='register' name='registerForm' novalidate> <!-- 用户名 --> <div class="form-group" ng-class='{"error":regis

彻底弄懂angularJS表单验证

常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" />