angularjs的表单验证

angularjs的表单验证

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

干活直接上代码  


  注意:这里是表单提交 如果上述红色部分不写 或者是 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">要的是abbp>  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>Documenttitle>
    <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手机codelabel>
                <input type="text" name="smg" ng-model="rsmg" ng-pattern="/[0-9]{4}/" required />
                <p ng-show="regForm.smg.$invalid &&  !regForm.smg.$pristine">请输入4手机codep>
            div>

            <div>
                <label>11pwdlabel>
                <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-11pwdp>
            div>
            <button type="button"  ng-disabled="regForm.$invalid" ng-click="submitForm(regForm.$valid)">Submitbutton> 
        form>

    div>body>html>

 

上一篇:vue组件传值eventBus


下一篇:Spring-Bean(二)