首页 > 代码库 > angular表单验证实例----可用的代码
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 src="js/jquery.min.js"></script> <script type="text/javascript" src="js/LAreaData1.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: 0;}* { -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: 0; 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: 0; padding: 0; font-weight: 400;}li { list-style: none;}audio:not([controls]) { display: none; height: 0;}[hidden],template { display: none;}a { background-color: transparent;}a:active,a:hover { outline: 0;}abbr[title] { border-bottom: 1px dotted;}b,optgroup,strong { font-weight: 700;}dfn { font-style: italic;}h1 { font-size: 2em;}mark { background: #ff0; color: #000;}small { font-size: 80%;}sub,sup { font-size: 75%; line-height: 0; 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: 0;}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: 0;}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: 0; padding: 0;}input { line-height: normal;}input[type=checkbox],input[type=radio] { box-sizing: border-box; padding: 0;}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: 0;}table { border-collapse: collapse; border-spacing: 0;}td,th { padding: 0;}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: 0;}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: 100000;}.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: 0; 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: 0; 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: 0;}.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:0; background-color: #FF6347; border-radius: 16px; color:#ffffff; text-indent: 0em;}input{ text-indent: 1em;}input:focus,select:focus { border-color: #66afe9; outline: 0; -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表单验证实例----可用的代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。