AngularJs表单校验功能实例代码
废话不多说了，具体代码如下所示：
<!DOCTYPE html>
<html ng-app="angularFormCheckModule">
<head>
<meta charset="UTF-8">
<title>angular表单校验</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" />
<style>
span{
color: red;
}
</style>
</head>
<body ng-controller="angularFormCheckCtrl">
<!--使用angular校验，每一个校验的项都必须用ng-model，不然无法执行在脏检查，就无法校验-->
<form name="angularForm" novalidate method="post">
<table class="table table-bordered">
<tr>
<td>用户名</td>
<td>
<input type="number" required="required" ng-model="user.userName" name="userName" ng-minlength="6"/>
<!--angularForm.userName.$dirty检查是否是第一次输入！网上有很多种方法校验是否是第一次输入-->
<span class="warning" ng-show="angularForm.userName.$dirty && angularForm.userName.$error.required">*</span>
<span class="warning" ng-show="angularForm.userName.$error.number">只能输入数字</span>
<span class="warning" ng-show="angularForm.userName.$error.minlength">最少为6位数</span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<!--这里的id,一定要等于compare-pwd的值，因为指令里面是根据Id取值的-->
<input type="password" required="required" ng-minlength="6" name="pwd" ng-model="user.password" id="pwd"/>
<!--angularForm.pwd.$pristine首次输入，不太清楚的就自己运行，去掉条件一个一个的试！-->
<span class="warning" ng-show="!angularForm.pwd.$pristine && angularForm.pwd.$error.required">*</span>
<span class="warning" ng-show="angularForm.pwd.$error.minlength">最少为6位数</span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<!--这里compare-pwd的值，要等于被比较的对象的name属性值，即第一个密码框的name值-->
<input type="password" required="required" name="pwd2" compare-pwd="pwd" ng-model="pwd2"/>
<span class="warning" ng-show="angularForm.pwd2.$error.required">*</span>
<!--注意这里的pwdmatch,是指令里面设置的-->
<span class="warning" ng-show="angularForm.pwd2.$error.pwdmatch">X</span>
<span class="warning" ng-show="angularForm.pwd2.$valid" style="color: green;">OK</span>
<!--
其实这种事最简单的校验方式，不用写指令！！！
<span ng-show="user.password !=pwd2">两次密码输入不一致</span>
-->
</td>
</tr>
<tr>
<td>手机</td>
<td>
<!--pattern正则表达式校验输入内容-->
<input type="number" required="required" name="phone" ng-model="user.phone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/">
<span class="warning" ng-show="angularForm.phone.$error.required">*</span>
<span class="warning" ng-show="angularForm.phone.$error.number">只能输入数字</span>
<span class="warning" ng-show="angularForm.phone.$error.pattern">手机格式不正确</span>
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" required="required" ng-model="user.email" name="email"/>
<span class="warning" ng-show="angularForm.email.$error.required">*</span>
<span class="warning" ng-show="angularForm.email.$error.email">邮箱格式不正确</span>
</td>
</tr>
<tr>
<td>URL</td>
<td>
<input type="url" required="required" ng-model="user.url" name="url"/>
<span class="warning" ng-show="angularForm.url.$error.required">*</span>
<span class="warning" ng-show="angularForm.url.$error.url">URL格式不正确</span>
</td>
</tr>
<tr>
<td>(注:*为必填)</td>
<td>
<input type="submit" value="提交" ng-disabled="!angularForm.$valid" class="btn btn-success"/>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/angular-1.2.22.js" ></script>
<script type="text/javascript" src="../js/angularFormCheck.js" ></script>
</html>
js代码（除了指令意外，没什么可用的，写出来只是为了，说一下mvc模式而已！）
var app = angular.module("angularFormCheckModule",[]);
/*这里使用MVC的模式（用来举例说明MVC而已）*/
app.controller("angularFormCheckCtrl",function($scope,angularFormCheckFactory){//function里的参数写你在函数里需要用到的
$scope.testVar = angularFormCheckFactory.getTest();//这里就能取到$scope.testVar的值为---"练习angular表单校验";
$scope.user = {};
$scope.test= "sss";
});
/*自己可以去看factory、service、providers的区别（http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider）*/
/*用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。*/
app.factory('angularFormCheckFactory',function(){
//这里写自己的业务逻辑
var test = "练习angular表单校验";
var service = {};//自定义一个对象
service.getTest = function(){//给对象添加方法
return test;
}
return service;//返回自定义的service对象！！！
});
/*自定义指令--比较两个密码是否相等.angular的指令是驼峰的形式（这里是comparePwd页面就是compare-pwd）*/
app.directive('comparePwd',function(){
/*angular 自定义指令，可上网自行查找*/
return{
require : 'ngModel',
/*scope表示作用域，elem表示使用这个指令的元素对象（这里指第二个密码框），attrs。。。ctrl。。。*/
link : function(scope,elem,attrs,ctrl){
/*写自己的业务逻辑*/
//注意这样取值的话，第一密码框的Id值必须要设置且必须与第二个密码框的compare-pwd属性的值相同
var firstPwdIdObj = "#" + attrs.comparePwd;
$(elem).add(firstPwdIdObj).on('keyup',function(){
/*手动执行脏检查*/
scope.$apply(function(){
//$(firstPwdIdObj).val()表示第一个密码框的值。elem.val()表示第二个密码框的值
var flag = elem.val() === $(firstPwdIdObj).val();
//alert(flag+",--"+elem.val()+",--"+$(firstPwdIdObj).val());
ctrl.$setValidity("pwdmatch",flag);//flag,表示是否相等。pwdmatch用于$error时的标识符，注意看页面，$setValidity是require中ngModel的方法！
});
});
}
}
});
下面看一段代码关于AngularJs获取焦点与失去焦点时的表单验证
<!DOCTYPE html>
<html ng-app="formExample">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.js"></script>
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope)
{
$scope.userType = 'guest';
$scope.change = false;
}]);
</script>
</head>
<body>
<form name="myForm" ng-controller="FormController">
userType: <input name="input" ng-model="userType" ng-blur="change=true" ng-focus="change=false" required>
<span class="error" ng-show="myForm.input.$error.required && change">必填项</span><br>
</form>
</body>
</html>
以上所述是小编给大家介绍的AngularJs表单校验功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Angular在模板驱动表单中自定义校验器的方法
引言 模板驱动表单相比较响应式表单可以少更少的代码做同样的事情,可也损失了自由度与更易测试,当然很多人并不在乎啦. 所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法. 表单最核心的是校验体验,在Angular中简直就是发挥到了极致,比如:required.min.max.pattern 等,这些原本是HTML DOM元素中的表述,而Angular默认实现了一整套的校验指令,比如:required 对应 RequiredValidator. 然后很多时候我们需要一些特殊的
-
AngularJS入门教程之表单校验用法示例
本文实例讲述了AngularJS表单校验用法.分享给大家供大家参考,具体如下: 表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面的校验.如果对HTTP协议比较熟,甚至还可以在程序中手动构造一段HTTP请求发到服务器,所以服务器端的数据校验绝对是必不可少的. WEB前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是
-
angular4中关于表单的校验示例
本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过. 一.使用响应式表单的步骤 1.在模块(一般是app.module.ts)中引入ReactiveFormsModule 2.在组件的ts文件中使用响应式表单 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; export class ReactiveFormComponent implements OnInit { p
-
Angularjs使用指令做表单校验的方法
前言 通常,使用angular做表单验证,一般都是把验证规则单独写为service,然后通过依赖注入的方式调用.在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service略显不合适宜,所以可以采用指令的方式. 简易表单 如下为一个简易表单,有四项提示信息,依据状态呈现.校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究.其中,user-validator为自定义指令. <form class
-
Angular模板表单校验方法详解
本文实例为大家分享了Angular模板表单校验的方法,供大家参考,具体内容如下 1. 创建指令 ng g directive directives/mobileValidator 2. html <form #myForm="ngForm" (ngSubmit)="onSubmit2(myForm.value, myForm.valid)"> <div> <h3>登录</h3> </div> <div
-
AngularJs表单校验功能实例代码
废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs
-
js实现表单校验功能
本文实例为大家分享了js实现表单校验功能的具体代码,供大家参考,具体内容如下 1.所用到的三个事件: onfocus(焦点聚焦事件).onblur(焦点离开事件).onkeyup(按键抬起的事件) 2.利用事件触发函数,函数中执行校验的信息. 3.利用checkform判断表单中的内容是否规范,如果规范submit按钮可以提交表单信息. 简单效果: form中的代码: <form action="demo.html" onsubmit="return checkForm
-
表单验证正则表达式实例代码详解
表单验证正则表达式具体内容如下所示: 首先给大家解释一些符号相关的意义 1. /^$/ 这个是个通用的格式. ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 2. 里面输入需要实现的功能. * 匹配前面的子表达式零次或多次: + 匹配前面的子表达式一次或多次: ?匹配前面的子表达式零次或一次: \d 匹配一个数字字符,等价于[0-9] 下面通过一段代码给大家分析表单验证正则表达式,具体代码如下: <!DOCTYPE html> <h
-
使用JavaScript进行表单校验功能
文本框校验 以下是文本框的校验步骤. 1.获取待校验的文本框value值, 2.对value值设置判定条件,使用if语句或switch语句实现. 3. 若满足条件,则校验通过,返回值为true. 4. 若不满足条件则返回值为false,替换文本输出校验的提示信息. 5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件. 6. 在input中调用校验函数,我使用的是onblur事件触发校验函数. 下拉框校验 下拉框的校验相比文本框略有不同,下拉框中option
-
vue+element实现表单校验功能
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules="rules";ref="reference" 2.在el-form-item定义prop="name"; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 templa
-
vue elementUI 表单校验功能之数组多层嵌套
在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo
-
vue中使用element-ui进行表单验证的实例代码
element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q
-
jQuery完成表单验证的实例代码(纯代码)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"
-
SQL Server 2012 多表连接查询功能实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: -- 交叉连接产生笛卡尔值 (X*Y) SELECT * FROM Student cross Join dbo.ClassInfo --另外一种写法 SELECT * FROM Student , ClassInfo -- 内连接 (Inner 可以省略) SELECT * FROM Student JOIN dbo.ClassInfo ON dbo.Student.Class = dbo.ClassInfo.ID; -- Inner Jo
-
Bootstrap 实现表格样式、表单布局的实例代码
1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="./css