时间戳

首页 > 技术文章 > angularjs的表单验证

angularjs的表单验证

adouwt 2018-08-09 17:47 原文

angularjs的表单验证

废话：angular的热度在减小，但是老项目依旧是angular的，就是不能丢，得会

干活直接上代码　　<!DOCTYPE html>

<html>
<head>
    <!-- CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <style>
        body     { padding-top:30px; }
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: rgb(113, 173, 115);
        }
        button:focus {
            background: rgb(156, 207, 156);
            outline: none;
        }
        button[disabled] {
            background: rgb(116, 119, 116)
        }
    </style>
    <!-- JS -->
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
    <script>
        var validationApp = angular.module('validationApp', []);
        validationApp.controller('mainController', function($scope) {
            $scope.submitForm = function(isValid) {
                if (isValid) {
                    $('URL'，data，function(result){
　　　　　　　　　　　　　　　　....
　　　　　　　　　　　　})
　　　　　　　　　　　　return false
                }
            };
        });
    </script>
</head>
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
    <div class="page-header"><h1>AngularJS Form Validation</h1></div>
    <form name="userForm"  novalidate>
        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid}">
            <label>Name*</label>
            <input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p>
        </div>
        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="Susername" ng-minlength="3" ng-maxlength="8" required>
            <!-- <input type="text" name="username" class="form-control" ng-model="user.username" ng-pattern="/^[a-zA-Z0-9]|[._]/" required> -->
            <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
            <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
            <!-- <p ng-show="userForm.username.$error.pattern" class="help-block">数字，字母 或者 ._  </p> -->
        </div>
        <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="Demail" required>
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
        </div>
        <button type="button" class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="submitForm(userForm.$valid)">Submit</button> 
     </form> 
   </div> 
 </body> 
</html>

　　注意：这里是表单提交 如果上述红色部分不写 或者是 type=“submit“ 在提交页面的时候 ，我们需要的ajax的效果没办法展示，会直接刷新。

　　　　　　处理用 button的 类型，也可以在 ajax 提交的 代码中最后 return false 

对于angularjs 的解释：

　　ng 指令绑定表单，上面的蓝色部分都是必不可少的;

 

　　novalidate ,禁止使用表单的默认提交，采用我们ajax的提交方式

　　userForm 必需的表单name 后面要绑定到这个form name 属性
　  ng-pattern="/ab{2,}/" 可以单独为 input 的表单做正则验证，如果不正确就会触发下面的ng-show
　  ng-show="userForm.name.$invalid && !userForm.name.$pristine" 错误信息的展示条件 

　　<input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required>
   <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p>
　　ng 是通过name 属性关联起来的，input 里面的name 和对应表单里面的格式验证 name 要一致；

　 name="name" 必须的input 的那么属性 　　
 
　　ng-model="Sname" 必须要的model 不然绑定不到 　，可以不和name的名字一致
　
　　所有的input 都有required的属性 表示表单必填 　　　

　　ng-disabled="userForm.$invalid" 表示按钮的是否点击状态 取决于表单是否都已经填写 　
　 
　

 

　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button {
            background: green;
            width: 100px;
            height: 20px;
        }
        button[disabled] {
            background: rgb(116, 119, 116)
        }
    </style>
</head>
<body ng-app="validationApp" ng-controller="mainController">
    <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.js"></script>

    <script>
            var validationApp = angular.module('validationApp', []);
            validationApp.controller('mainController', function($scope) {
                console.log(regForm.phone.$pristine)
                $scope.submitForm = function(isValid) {
                    console.log(111);
                    $scope.regForm.already = true;
                    if (isValid) {
                           console.log($scope.rphone)
                           console.log($scope.rsmg)
                           console.log($scope.rpwd)
    　　　　　　　　　　　　return false
                    }
                };
            });
        </script>
    <div>
        <h3>注册</h3>
        <form  name="regForm" novalidate>
            <div>
                <label>正确的手机号</label>
                <input type="text" name="phone" ng-model="rphone" ng-pattern="/[0-9]{11}/" required />
                <p ng-show="regForm.phone.$invalid &&  !regForm.phone.$pristine">请输入正确的手机号</p>
                <p ng-show="regForm.already">手机已经注册</p>
            </div>
            <div>
                <label>请输入4手机code</label>
                <input type="text" name="smg" ng-model="rsmg" ng-pattern="/[0-9]{4}/" required />
                <p ng-show="regForm.smg.$invalid &&  !regForm.smg.$pristine">请输入4手机code</p>
            </div>

            <div>
                <label>11pwd</label>
                <input type="text" name="pwd" ng-model="rpwd" ng-pattern="/[0-9]{6,11}/" required />
                <p ng-show="regForm.pwd.$invalid &&  !regForm.pwd.$pristine">请输入6-11pwd</p>
            </div>
            <button type="button"  ng-disabled="regForm.$invalid" ng-click="submitForm(regForm.$valid)">Submit</button> 
        </form>

    </div>

</body>
</html>


 






 


　　







	

		


推荐阅读