angular表单验证实例----可用的代码
前段时间，公司做一个单页面，就是一个表单验证，早开始在菜鸟教程上关注了angular,所以下派上用场了
angular里面对于表单验证，设置了很多指令。
也就是说不用自己写一些逻辑，直接绑定指令就行。
ng-app 启动你angular的模块
ng-controller 控制器，启动你angualr里面的逻辑代码作用在页面上
ng-options 循环你select里面的option标签，很好用的
ng-submit，表单提交执行的
novalidate 表单form配合后期检测的
ng-model 实现双数据绑定
ng-show 根据一定的逻辑实现显示
ng-cloak 绑定在节点上，防止节点渲染，angular指令闪烁
ng-class class类名根据你的逻辑，出现
ng-required 检测你的input为不为空
ng-pattern 正则表达式，绑定在input上面限制输入规范
ng-maxlength 最多输入限制
ng-minlength 最少输入限制
ng-disabled="myForm.$invalid" 脏检测
大概就需要这些指令了，大家不要喷我。谢谢
下面开始上代码了，说一下呀
LArea.js是一个移动端地址三联动弹出框，我就不解释了、、、、、、、、、、、、、、、、、、、
jquery其实和angualr没有关系，主要是配合LArea.js使用
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<title>礼品信息</title>
<link rel="stylesheet" href="css/gift.css">
<link rel="stylesheet" href="css/LArea.min.css">
<script src="js/angularjs.js"></script>
<script type="text/javascript" src="js/LAreaData2.js"></script>
<script type="text/javascript" src="js/LArea.js"></script>
<script src="js/gift1.js"></script>
</head>
<body>
<div class="sub_form">
<form name="myForm" ng-controller="gift" ng-submit="save()" novalidate>
<div class="info" ng-class="{'has-error':myForm.userName.$dirty && myForm.userName.$invalid}">
<label for="userName">真实姓名:</label>
<input type="text" name="userName" class="sub_txt" id="userName" placeholder="请填写真实姓名" ng-pattern=/^[\u4e00-\u9fa5]*$/ ng-model="userName" ng-minlength="2" ng-maxlength="10" ng-required="true">
</div>
<div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$error.maxlength" class="info alert">
用户名长度不能超过10位
</div>
<div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$error.minlength" class="info alert">
用户名长度不能小于5位
</div>
<div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$error.pattern" class="info alert">
用户名不符合中文
</div>
<div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$invalid &&myForm.userName.$error.required" class="info alert">
用户名不能为空
</div>
<!-- 电话 -->
<div class="info" ng-class="{'has-error':myForm.mobile.$dirty && myForm.mobile.$invalid}">
<label for="mobile">联系电话:</label>
<input type="text" name="mobile" class="sub_txt" id="mobile" placeholder="请填写联系电话" ng-pattern=/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/ ng-model="mobile" ng-minlength="11" ng-maxlength="11" ng-required="true">
</div>
<div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.maxlength" class="info alert">
电话不能低于11位
</div>
<div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.minlength" class="info alert">
电话不能低于11位
</div>
<div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.pattern" class="info alert">
电话不符合
</div>
<div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$invalid &&myForm.mobile.$error.required" class="info alert">
电话不能为空
</div>
<div class="info" ng-class="{'has-error':myForm.address.$dirty && myForm.address.$invalid}">
<label for="address">收货区域:</label>
<input type="text" name="address" id="details" class="sub_txt" placeholder="请填写收货地址" ng-model="address" ng-minlength="2" ng-required="true" readonly="">
</div>
<div ng-cloak ng-show="myForm.address.$dirty && myForm.address.$invalid &&myForm.address.$error.required" class="info alert">
收货区域不能为空
</div> <div class="info" ng-class="{'has-error':myForm.detaileDaddress.$dirty && myForm.detaileDaddress.$invalid}">
<label for="detaileDaddress">详细地址:</label>
<input type="text" name="detaileDaddress" id="detaileDaddress" class="sub_txt" placeholder="详细地址"
ng-model="detaileDaddress" ng-minlength="2" ng-required="true">
</div>
<div ng-cloak ng-show="myForm.detaileDaddress.$dirty && myForm.detaileDaddress.$invalid && myForm.detaileDaddress.$error.required" class="info alert">
详细地址不能为空
</div>
<div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.minlength" class="info alert">
详细地址不能最少2个字符
</div> <div class="info" ng-class="{'has-error':myForm.postcode.$dirty && myForm.postcode.$invalid}">
<label for="postcode">邮编:</label>
<input type="text" name="postcode" id="postcode" ng-model="postcode" class="sub_txt" placeholder="请填写邮编" ng-required="true">
</div>
<div ng-cloak ng-show="myForm.postcode.$dirty && myForm.postcode.$invalid &&myForm.postcode.$error.required" class="info alert">
<span>邮编不能为空</span>
</div> <div class="info">
<label for="userName">所属单位:</label>
<select name="company" class="sub_txt" id="company" placeholder="请填写所属单位" ng-options="x for x in dates" ng-model="dates[x]" ng-required="true">
<option value="">请选择</option>
</select>
</div>
<div class="btn_submit">
<input type="submit" class="submit" ng-disabled="myForm.$invalid">
</div>
</form>
</div>
</body>
<script type="text/javascript">
var area = new LArea();
area.init({
'trigger': '#details',
'valueTo': '#vale',
'keys': {
id: 'value',
name: 'text'
},
'type': 2,
'data': [provs_data, citys_data, dists_data]
});
</script> </html>
下面是js文件了
var app=angular.module("myapp",[]);
app.controller('gift',function($scope,$http){
$scope.dates=[
"一院",
"四院",
"五院",
"六院",
"七院"
];
$scope.save = function () {
var myselect=document.getElementById("company");
var index=myselect.selectedIndex ;
var companyVal=myselect.options[index].value;
var companyText=myselect.options[index].text;
//获取到表单是否验证通过
if($scope.myForm.$valid){
var datajson = {
userName:$scope.userName,
mobile:$scope.mobile,
address:$scope.address,
detaileDaddress:$scope.detaileDaddress,
postcode:$scope.postcode,
companyVal:companyVal,
companyText:companyText
}
console.log(datajson);
/* $http({
method : 'POST',
url : '',
params : pData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function(data) {
alert('表单通过');
});*/
}else{
alert('表单没有通过验证');
}
}
});
解释下
$http({
method : 'POST',
url : '',
params : pData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function(data) {
alert('表单通过');
});
和jquery的$.ajax一样，和后台交互的
if($scope.myForm.$valid){
var datajson = {
userName:$scope.userName,
mobile:$scope.mobile,
address:$scope.address,
detaileDaddress:$scope.detaileDaddress,
postcode:$scope.postcode,
companyVal:companyVal,
companyText:companyText
}
$scope.你节点上的ng-model里面的数据
这样能获取到你input里面的内容
body,
html {
width: 100%;
}
a,
a:active,
a:hover {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-decoration: none;
}
img,
legend {
border:;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin:;
font-family: "Microsoft Yahei", "Helvetica Neue", helvetica, tahoma, arial, sans-serif;
font-size: .24rem;
background-color: #f2f2f2;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
dd,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
img,
li,
p,
ul {
margin:;
padding:;
font-weight:;
}
li {
list-style: none;
}
audio:not([controls]) {
display: none;
height:;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline:;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
optgroup,
strong {
font-weight:;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height:;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height:;
}
pre,
textarea {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace,monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin:;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border:;
padding:;
}
input {
line-height: normal;
}
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding:;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto;
}
input[type=search] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
padding:;
}
table {
border-collapse: collapse;
border-spacing:;
}
td,
th {
padding:;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
border: 0px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin:;
}
input[type="number"] {
-moz-appearance: textfield;
}
textarea,
select,
input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
}
a,
select,
button,
input {
-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
body {
background: #ffffff; }
.frame,.frames{
width:100%;
height:100%;
background-color: rgba(0,0,0,0.8);
position: fixed;
display: none;
z-index:;
}
.parent,.parents{
display:table-cell;
vertical-align:middle;
}
#company{
background: #ffffff;
}
.chid,.chids{
width:80%;
margin:0px auto;
background: #ffffff;
border-radius: 6px;
text-align: center;
font-size: 20px;
padding: 20px 0px;
}
.ch_title{
display: inline-block;
width:30%;
float: left;
font-size: 14px;
text-align: right;
padding-right:4%;
}
.ch_p{
display: inline-block;
overflow:hidden;
word-break:break-all;
width:65%;
float: left;
text-align: left;
font-size: 14px;
text-indent:0em;
}
.ch_value{
width: 100%;
margin:0px auto;
}
.modify{
width: 100%;
height:35px;
margin:10px auto 0px auto;
}
.m_left{
display: inline-block;
width:30%;
height: 32px;
text-align: center;
line-height: 32px;
cursor: pointer;
color: #ffffff;
font-size: 14px;
border:;
background-color:#3399CC;
border-radius: 16px;
color: #ffffff;
float: left;
margin-left: 10px;
}
.m_right{
display: inline-block;
width:30%;
height: 32px;
text-align: center;
line-height: 32px;
cursor: pointer;
color: #ffffff;
font-size: 14px;
border:;
background-color:#FF6347;
border-radius: 16px;
color: #ffffff;
float: right;
margin-right: 10px;
}
.titleTxt,.sub_form{
width:96%;
padding:2%;
margin:0px auto;
}
.titleTxt>h5{
font-size:30px;
text-align: center;
color:#FF6347;
padding:10px 0px 20px 0px;
}
.p_txt{
text-align:left;
font-size:18px;
line-height:30px; }
.titleTxt span{
color:#FF6347;
}
.p_font{
text-align:left;
}
.sub_form p{
font-size: 14px;
color:#FF6347;
text-align:left;
}
form{
position: relative;
z-index:;
}
.info{
width: 100%;
margin:0px auto 4px auto; }
label{
display: inline-block;
width:25%;
font-size:16px;
text-align:right;
}
.sub_txt{
display: inline-block;
width: 70%;
height:35px;
margin-top:6px;
font-size:16px;
border: 0px; }
.tip-bubble {
display: block;
background-color: #1cb596;
width: 100%;
padding: 4px 0px;
color: #ffffff;
text-align: center;
border-radius: 4px;
}
.btn_submit{
width: 100%;
text-align: center;
}
.submit{
display: inline-block;
width: 80%;
max-width: 320px;
height: 32px;
margin: 30px auto 0px auto;
text-align: center;
line-height: 32px;
cursor: pointer;
color: #ffffff;
font-size: 14px;
border:;
background-color: #FF6347;
border-radius: 16px;
color:#ffffff;
text-indent: 0em; }
input{
text-indent: 1em;
}
input:focus,select:focus {
border-color: #66afe9;
outline:; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.has-error{
color:red;
}
.has-error>input{
border:1px solid red;
}
.alert{
width: 100%;
text-align: center;
color:red;
border-bottom: 1px solid red;
}
.none{
display: none;
}
.showError{
display: block;
}
css部分我就不说了
这种写法其实不优化，主要体现出提示上，重复的节点出现多，在项目中尽量模板简洁，不要出现重复的节点，反正我看起来很刺眼。。。。
下面我会把节点封装起来，把提示判断写在js逻辑里面，我觉得是一个优化的写法，大神不要喷我
angular表单验证实例----可用的代码的更多相关文章
- 从浅入深剖析angular表单验证
最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
- Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...
- Bootstrap+PHP表单验证实例
简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- jquery-4 完整表单验证实例
jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...
- Angular表单验证
novalidate 去掉html5自带的验证 ng-minlength 规定输入文本的最小长度 ng-maxlength 规定输入文本的最大长度 ng-submit 接收一个方法名 ...
- angular 表单验证
最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...
- 简单的angular表单验证指令
<html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
随机推荐
- xmlplus 组件设计系列之八 - 分隔框（DividedBox）
分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则 ...
- 初窥GPFS文件系统
作者:姜江 linuxemacs@gmail.com 原文地址:http://blog.csdn.net/jznsmail/article/details/5502840?reload 本作品采用知识 ...
- office web apps 部署-搭建域控服务器
开始第一条先说注意事项:我所配置的环境是用了三台2012server虚拟机,三台虚拟机必须要加下域控,而且登录操作的时候必须以域账号登录,否则测试不通过!在笔记本上搭建了两个虚拟机(window se ...
- 使用Blender的UV映射制作一个地球
UV映射是一个用来2D图片纹理转换3D网格的标准技术.U和V表示平面坐标的两个轴,对应了3D空间中X.Y和Z.Blender手册是这样解释UV映射的:想象一个3D模型对象,例如一个球体,平铺到桌面上. ...
- eclipse--java工程转web工程 以及 java或java web工程转maven工程
1. 打开工程文件夹,编辑工程的.project文件. 在<natures></natures>中加入 <nature>org.eclipse.wst.commo ...
- 1012 u Calculate e
A simple mathematical formula for e iswhere n is allowed to go to infinity. This can actually yield ...
- 【iOS开发】3.UIViewController
1.概述 iOS和相关库的开发大量使用了模型-视图-控制器(MVC)模式.一般而言,MVC是一种策略,用于分离展现(视图).数据(模型)和业务逻辑(控制器).确切地讲,模型是简单数据,如Person或 ...
- HttpClient和 HtmlParser实现爬虫
网络爬虫技术 1 什么叫网络爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不 ...
- mysql获取当前日期的周一和周日的日期
,,date_format(curdate(),)//获取当前日期 在本周的周一 的日期 ,,date_format(curdate(),)//获取当前日期 在本周的周日 的日期
- vue2.0结合Element实现select动态控制input禁用
今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得 ...