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

2024-03-30 03:09•linux•阅读 4107

前段时间，公司做一个单页面，就是一个表单验证，早开始在菜鸟教程上关注了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   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"  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"  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"  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"  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"  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"  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逻辑里面，我觉得是一个优化的写法，大神不要喷我

上一篇 »java实现文件夹上传功能实例代码，SpringBoot框架
下一篇 »js验证表单大全，超级的强悍的javascript代码，转载

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

相关推荐

，七JavaScript之[调试]与[前端表单验证]

Javascript 表单验证[最多一个]

JavaScript 表单验证

JavaScript 表单验证

JavaScript验证字符串只能包含数字或者英文字符的代码实例

php常用表单验证类用法实例

java 表单验证

用angular中的angular－messages，ngMessage实现表单验证时输入框外提示信息的显示与隐藏(直接把代码粘贴到新建的html文件中即可实现