AngularJS表单验证,手动验证或自动验证

namespace App\Http\Controllers;

use App\Models\Users;
use Illuminate\Support\Facades\Validator;
use Symfony\Component\HttpFoundation\Request;

class UsersController extends Controller{

// 添加用户post数据验证
 public function create(Request $request){
   if($request->isMethod('POST')){
     $data=$request->input('users');
            // 1.控制器的验证演示 Controller中 use ValidatesRequests 就可以直接调用;
            // blade中HTML中form表单中name的传值演示 <input name="users[u_mobile]" placeholder="请输入" class="layui-input" type="text">
            // <input name="u_gender" value="1" type="radio"><input name="u_gender" value="2" type="radio">
            $this->validate($request,[   // 以下正则验证都是自己随意编写的并没有严格去验证,如需要严格的请自行编写或百度,#此处只为重点讲Laravel可用验证用法
          //required必须输入 unique 唯一(在users表中u_mobile[手机号]为唯一,不允许重复,regex表达式验证) 此处要用多个条件验证和regex正则建议采用[]形式中间用逗号分隔
                'users.u_mobile'=>['required','unique:users','regex:/^1[3|4|5|7|8][0-9]{9}$/'], // 如果是一维数组直接'u_mobile'就可以了;
                // 编辑过程中验证唯一示例如:'users.u_mobile'=>['required',Rule::unique('users')->ignore($user->id),'regex:/^1[3|4|5|7|8][0-9]{9}$/'],
                // $user为查出的用户对象,ignore是为了强迫Unique规则忽略指定ID($user->id)再进行判断唯一,如果不是在控制器中使用validate验证你可以采用request('id')来获取指定id,request为一个辅助函数很实用 
                'users.u_qq'=>['required','regex:/^[1-9][0-9]{4,}$/'], // QQ号
                'users.u_email'=>['required','unique:users','regex:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/'],  // 大概的邮箱验证
                'u_gender'=>'required|in:1,2',          // in 的用法用户性别只能输入1和2(男/女)  此处采用中划线的形式验证     如果文字也可以设置为 'required|in:男,女'
                'users.u_nickname'=>['required','regex:/^[_\w\d\x{4e00}-\x{9fa5}]{3,20}$/iu'], // 随意写的用户名验证
                /*****以下开始重点演示可用的验证用法,有些命名属性和users几乎无什么关联了,重点看验证规则写法,其它的并不重要****/
                'salary' => 'required|integer|min:1000', // 工资 integer必须为整数,但是数字必须不能超过2147483647否则它将判断为“不是整数”, min最小值为1000
                // nullable 允许输入为空, required_if如果用户性别选择了为1那么input中属性name="name"输入框就必须要填写
          'users.name' => 'nullable|required_if:u_gender,1|string|between:1,10', // between 之间(包括1和10) 姓名必须在字数1位和10位之间
          'tel'=>['nullable','regex:/^((0\d{2,3}-?)?\d{7,8})|(1[3-9]\d{9})$/'],  // 联系电话(座机号和手机号都可以),输入可以为空,但有输入值时就必须按照正则验证
          'users.id_no' =>['required','regex:/(^\d{17}[0-9xX]{1}$)|(^\d{14}[0-9xX]{1}$)/'],  // 身份证号码验证(包括15位的验证)
                'users.age' => ['nullable', 'integer', 'regex:/^[1-9][0-9]?$/'], //年龄 也可以尝试中划线形式:'nullable|integer|regex:/^[1-9][0-9]?$/'
                // 余额 numeric必须为数字,max最大值为922337203685477 但是max设置为9223372036854771 但用户输入9223372036854772、9223372036854773 也可以验证通过
                // max设置为9223372036854775807 但输入 9223372036854775808、9223372036854775809 还是会通过 所以max还有些缺陷请谨慎使用!
                // 同样的问题在 between用于数字类型的精确的范围之间验证也会出现问题,如:between:1,9223372036854771 输入9223372036854773 也会通过,也需要注意!!!  
                'balance' => 'nullable|numeric|min:1|max:922337203685477', //max如果是数字类型,最大为922337203685477内能精确验证,超过了可能出现问题.
                //html模版如: 互联网<input type="checkbox" name="industry_nos[]" value="1"> 建筑<input type="checkbox" name="industry_nos[]" value="2">
                'industry_nos' =>'required|array', // 行业  array 验证的字段必须是一个php数组
                'industry_nos.*' =>'integer|distinct|between:1,6', // 整数必须在1和6之间 distinct 指定的字段不能有任何重复值
                'telephone' => ['required_without:id_no', 'regex:/^1[3-9]\d{9}$/'], // 手机号 required_without 只要id_no字段不存在,telephone那么就必须存在且不能为空
                'id_no' => ['required_without:telephone', 'regex:/(^\d{17}[0-9xX]{1}$)|(^\d{14}[0-9xX]{1}$)/'], // 身份证号码 只要telephone不存在,那么id_no就必须存在不能为空
                //html模版如: 密码二次确认 <input type="password" name="password" /> <input type="password" name="password_confirmation" />
                'password'=>'required|min:6|confirmed', // confirmed 验证的字段必须和password_confirmation 保持一样否则就会验证不成功
                'password_confirmation' => 'required|min:6', // password_confirmation会验证和confirmed一致
                'pics' =>'required|json|not_in:[]', // json必须为有效的json字符串,not_in不能为包含给定的值[]
                'birthday'=>'nullable|date', // 验证的字段值必须是通过PHP函数strtotime校验的有效日期
                'start_date' => 'nullable|date_format:Y-m-d', //开始时间 date_format 验证的字段必须与给定的时间格式相匹配
    'amount' => ['required','numeric','regex:/^\d{1,14}$/'], // 正则允许的最大为: 99999999999999,超过即为不合法
    //msyql bigint带符号的最大值为9223372036854775807,但php中如果位数超过14将采用科学计数法如果采用max不太合适,所以先默认使用上面的正则验证方法
            ],[
                'required'=>':attribute为必填项',//:attribute 字段占位符表示字段名称
                'regex'=>':attribute格式不正确',
                'unique'=>':attribute已经存在',
                'integer'=>':attribute必须为整数',
                'min'=>':attribute不能小于6位',
                'email'=>':attribute格式不正确',
                'in'=>':attribute必须选择',
                'max'=>':attribute大于了10位',
  // 此处开始省略..就不再继续编写了,写法同上面都差不多,自行编写即可
            ],[
                'users.u_mobile'=>'手机号码', //指定字段名称
                'users.u_qq'=>'QQ号码',
                'users.u_email'=>'联系邮箱',
                'u_gender'=>'用户性别',
                'users.u_nickname'=>'用户昵称',
                // 此处开始省略..就不再继续编写了,写法同上面都差不多,自行编写即可
            ]);
        // 2. validator类验证演示---------------
        /*$validator=Validator::make($request->input(),[
                   'users.u_mobile'=>['required','unique:users','regex:/^1[3|4|5|7|8][0-9]{9}$/'],//如果是一维数组直接'u_mobile'就可以了;
                   'users.u_qq'=>['required','regex:/^[1-9][0-9]{4,}$/'],
                   'users.u_email'=>'required|unique:users|email',
                   'users.u_gender'=>'required|in:0,1,2',
                   'users.u_nickname'=>['required','regex:/^[_\w\d\x{4e00}-\x{9fa5}]{3,20}$/iu'],
               ],[
                   'required'=>':attribute为必填项',//:attribute 字段占位符表示字段名称
                   'regex'=>':attribute格式不正确',
                   'unique'=>':attribute已经存在',
                   'integer'=>':attribute必须为整数',
                   'min'=>':attribute不能小于6位',
                   'email'=>':attribute格式不正确',
                   'in'=>':attribute必须选择',
                   'max'=>':attribute大于了10位',
               ],[
                   'users.u_mobile'=>'手机号码', //指定字段名称
                   'users.u_qq'=>'QQ号码',
                   'users.u_email'=>'联系邮箱',
                   'users.u_gender'=>'用户性别',
                   'users.u_nickname'=>'用户昵称',
               ]);

                if($validator->fails()){
                   abort(422, $validator->errors()->first());
                }*/
   }

 }

}

客户端验证例子

  首先成立2个表单,在其送交时用JavaScript方法进行认证,若该格局重临true,则展开表单的交给,若重临false,则表单不提交。

 

      <!-- 表单提交时执行JavaScript方法validate(),如果该方法返回false,那么表单是不会提交的 -->
    <form onsubmit="return validate()" action="servlet/ValidateServlet">
    username:<input type="text" name="username" id="username1"><br>
    password:<input type="password" name="password" id="password1"><br>
    re-password:<input type="password" name="repassword" id="repassword1"><br>
    <input type="submit" value="submit">
    </form>

 

  其中用于声明的JavaScript方法如下:

<script type="text/javascript">
        function validate()
        {
            //第一种方式:通过ID获取元素
            // var username = document.getElementById("username1");
            // var password = document.getElementById("password1");
            // var repassword = document.getElementById("repassword1");

            //第二种方式:通过名字获取
            var username = document.getElementsByName("username")[0];//因为允许名字重复
            var password = document.getElementsByName("password")[0];
            var repassword = document.getElementsByName("repassword")[0];

            //判断用户名是否为空
            if("" == username.value)
            {
                //判断语句也可以写: username.value.length == 0
                alert("username can't be blank!");
                return false;

            }

            //密码和重复密码内容一样,长度在6到10之间

            //先验证密码长度
            if(password.value.length < 6 || password.value.length > 10)
            {
                alert("length of password is invalid!");
                return false;
            }
            if(repassword.value.length < 6 || repassword.value.length > 10)
            {
                alert("length of repassword is invalid!");
                return false;
            }

            //再验证重复密码和密码是否相同
            if(password != repassword)
            {
                alert("password and repassword don't match!");
                return false;

            }

            //通过重重考验后返回true,进行表单提交
            return true;

        }
    </script>

  在认证有误的时候,弹出对话框提醒,并且重回false,不提交表单。

  完整的login.jsp如下(在客户端验证的时候可以先不管转向的Servlet):

图片 1图片 2

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
        function validate()
        {
            //第一种方式:通过ID获取元素
            // var username = document.getElementById("username1");
            // var password = document.getElementById("password1");
            // var repassword = document.getElementById("repassword1");

            //第二种方式:通过名字获取
            var username = document.getElementsByName("username")[0];//因为允许名字重复
            var password = document.getElementsByName("password")[0];
            var repassword = document.getElementsByName("repassword")[0];

            //判断用户名是否为空
            if("" == username.value)
            {
                //判断语句也可以写: username.value.length == 0
                alert("username can't be blank!");
                return false;

            }

            //密码和重复密码内容一样,长度在6到10之间

            //先验证密码长度
            if(password.value.length < 6 || password.value.length > 10)
            {
                alert("length of password is invalid!");
                return false;
            }
            if(repassword.value.length < 6 || repassword.value.length > 10)
            {
                alert("length of repassword is invalid!");
                return false;
            }

            //再验证重复密码和密码是否相同
            if(password != repassword)
            {
                alert("password and repassword don't match!");
                return false;

            }

            //通过重重考验后返回true,进行表单提交
            return true;

        }
    </script>

  </head>

  <body>
      <!-- 表单提交时执行JavaScript方法validate(),如果该方法返回false,那么表单是不会提交的 -->
    <form onsubmit="return validate()" action="servlet/ValidateServlet">
    username:<input type="text" name="username" id="username1"><br>
    password:<input type="password" name="password" id="password1"><br>
    re-password:<input type="password" name="repassword" id="repassword1"><br>
    <input type="submit" value="submit">
    </form>
  </body>
</html>

login.jsp

 

  只是客户端的辨证是不可信的,用户可以查看源代码,找到表单action的Servlet,然后转向那么些地方,将参数用?连接在地点然后,那时候参数是从未经过客户端校验的

 

以后台为例,每回访问必将需求先判断用户是或不是是登陆状态,在其余框架中大家一般习惯在全体控制器的父控制器中判断,约等于在laravel中的app/controllers/BaseController.php类__construct方法中:

手动验证

所谓手动验证是因此AngularJS表单的属性来阐明。而改为AngularJS表单必须满意多个标准:一,给form成分加上novalidate=”novalidate”;贰,给form成分加上name=”theForm”,如下:

 

<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">Form Submitting</a>
    </div>
  </div>
</nav>

<div class="container main-content" ng-controller="myCtrl1">
  <!--novalidate让表单不要使用html验证-->
  <!--theForm变成scope的一个字段-->
  <form ng-submit="onSubmit(theForm.$valid)" novalidate="novalidate" name="theForm">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" ng-model="formModel.name"/>
    </div>

    <div class="form-group" ng-class="{
      'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
      'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
      }">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required" name="email"/>
      <p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)">必填</p>
      <p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确</p>
    </div>

    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" ng-model="formModel.username"/>
    </div>

    <div class="form-group">
      <label for="age">Age</label>
      <input type="number" class="form-control" id="age" ng-model="formModel.age"/>
    </div>

    <div class="form-group">
      <label for="sex">Sex</label>
      <select name="sex" id="sex" class="form-control" ng-model="formModel.sex">
        <option value="">Please choose</option>
        <option value="male">Mail</option>
        <option value="femail">Femail</option>
      </select>
    </div>

    <div class="form-group">
      <label for="password">Password</label>
      <input type="text" class="form-control" id="password" ng-model="formModel.password"/>
    </div>

    <div class="form-group">
      <button class="btn btn-primary" type="submit">Register</button>
    </div>

      <pre>
        {{theForm | json}}
      </pre>
  </form>
</div>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="second.js"></script>
</body>
</html>

 

以上,

● 给form加上novalidate=”novalidate”意味着表单将不再接纳HTML5注脚特性

给form加上name=”theForm”意味着表单的称谓是theForm。如何采纳theForm,比如大家证实表单是或不是被改动过theForm.$submitted
● 通过ng-submit提交表单
● formModel是$scope中的三特性能

对表单的Email举行了手动验证,使用了AngularJS表单的很多属性,比如theForm.email.$valid,theForm.$pristine,theForm.$submitted,
theForm.email.$error.required,theForm.email.$error.email
● 通过<pre>{{theForm |
json}}</pre>把AngularJS表单的持有属性都打印出来

 

{
  "$error": {
    "required": [
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "email",
        "$options": null
      }
    ]
  },
  "$name": "theForm",
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "email": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "email",
    "$options": null
  },
  "sex": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "sex",
    "$options": null
  }
}

 

如上,凡是有name属性的input都被出示在地点。

在second.js文件中定义了module,controller以及交付表单的艺术。

 

var myApp1 = angular.module('myApp1',[]);

myApp1.controller('myCtrl1', function($scope, $http){
    $scope.formModel = {};

    $scope.onSubmit = function(){
        $http.post('someurl',$scope.formModel)
            .success(function(data){
                console.log(':)');
            })
            .error(function(data){
                console.log(':(');
            });

        console.log($scope.formModel);
    };
});

 

如上的表单验证措施好处是可控性强,但针锋相对繁琐。

假定急需参考框架中验证类的源码可以进来
\vendor\laravel\framework\src\Illuminate\Validation\Concerns\ValidatesAttributes.php
文件中开展详细查看流程和调节,可以多钻研一下

劳动器端验证例子

  **从表单中取得参数:**JSP通过request内置对象得到表单音信,用差别的法子得到不相同门类的音信。

  服务器端验证程序,先将客户端验证部分去掉,即去掉 表单中的:onsubmit=”return validate()”

  那么用户在表单中付出的多元帅一向传到服务器端,服务器端Servlet对其开展求证:

  格局如下:有错误时将错误音信放在3个String类型的List中,最终判断那几个List是不是为空,假若为空,转向验证成功页面;倘使List不为空,则转向战败页面,突显错误消息。

 

package com.shengqishiwind.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



public class ValidateServlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException
    {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String repassword = req.getParameter("repassword");

        List<String> list = new ArrayList<String>();
        if(null == username || "".equals(username))
        {
            list.add("username can't be blank!");
        }

        if(null == password || password.length()<6 || password.length()>10)
        {
            list.add("password should be between 6 and 10");
        }
        if(null == repassword || repassword.length()<6 || repassword.length()>10)
        {
            list.add("repassword should be between 6 and 10");
        }

        if(null != password && null != repassword && !password.equals(repassword))
        {
            list.add("password and repassword don't match!");
        }

        //有两种结果:验证通过和不通过
        if(list.isEmpty())
        {
            req.setAttribute("username", username);
            req.setAttribute("password", password);
            req.getRequestDispatcher("../success.jsp").forward(req, resp);

        }
        else 
        {
            req.setAttribute("error", list);
            req.getRequestDispatcher("../error.jsp").forward(req, resp);
        }


    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException
    {

        this.doGet(req, resp);
    }

}

 

 

  成功页面JSP body部分:

  <body>
    username:<%= request.getAttribute("username") %><br>
    password:<%= request.getAttribute("password") %><br>
  </body>

 

  战败页面:

  <body>
    <h1>login failed</h1>
    <% List<String> list = (List<String>)request.getAttribute("error");
    for(String str: list)
    {
        out.println(str+"<br>");  
    }
    %>
  </body>

 

 

 

仍是可以接二连三优化,比如大家不应有在BaseController中展开Auth::check,大家得以动用Route::filter,在乞求此前就开展求证,那地方可以参考手册中Route的相关章节。

 

表单的认可

客户端确认:

  减弱服务器负荷

  收缩用户等待时间

  包容性难

服务器端确认:

  统一确认

  包容性强

  服务器负荷重

 

laravel自带了auth类和User模型来提携大家很有益于的完成用户登陆、判断。

AngularJS的表单验证大致有三种,一种是手动验证,一种是半自动验证。

参考资料

  圣思园张龙先生Java
Web培训摄像022。

 

机关验证

AngularJS的别的一种表单验证办法是半自动验证,即通过directive来促成,除了AngularJS自带的directive,还索要利用angular-auto-validate这几个第三,方module。

有关angular-auto-validate:

 

● 网址:
● 安装:npm i angular-auto-validate
● 引用:<script
src=”../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js”></script>
● module依赖:var myApp = angular.module(“app”,
[“jcs-autoValidate”]);

为了落到实处错误新闻本地化,还亟需angular-localize那么些第壹,方module:

● 安装:npm install angular-localize –save
● module依赖:var myApp = angular.module(“app”, [“localize”]);
● 引用:

<script
src=”../node_modules/angular-sanitize/angular-sanitize.min.js”></script>
<script
src=”../node_modules/angular-localize/angular-localize.min.js”></script>

其它,当点击提交表单按钮,要求禁用按钮并出示一种等待效果,需求运用angular-ladda那一个第贰方module:

● 安装:bower install angular-ladda –save
● module依赖:var myApp = angular.module(“app”, [“angular-ladda”]);
● 引用:
<link rel=”stylesheet”
href=”../bower_components/ladda/dist/ladda-themeless.min.css”/>

<script
src=”../bower_components/ladda/dist/spin.min.js”></script>
<script
src=”../bower_components/ladda/dist/ladda.min.js”></script>
<script
src=”../bower_components/angular-ladda/dist/angular-ladda.min.js”></script>

页面如下:

 

<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
  <meta charset="gb2312">
  <title></title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/>
  <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">Form Validating Auto</a>
    </div>
  </div>
</nav>

<div class="container main-content" ng-controller="myCtrl1">
  <!--novalidate让表单不要使用html验证-->
  <!--theForm变成scope的一个字段-->
  <form ng-submit="onSubmit()" novalidate="novalidate">
    <div class="form-group">
      <label for="name" class="control-label">Name</label>
      <input type="text" class="form-control" id="name" ng-model="formModel.name"  required="required"/>
    </div>

    <div class="form-group">
      <label for="email" class="control-label">Email</label>
      <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required"/>

    </div>

    <div class="form-group">
      <label for="username" class="control-label">Username</label>
      <input type="text"
             class="form-control"
             id="username"
             ng-model="formModel.username"
             required="required"
             ng-pattern="/^[A-Za-z0-9_]{1,32}$/"
             ng-minlength="7"
             ng-pattern-err-type="badUsername"
        />
    </div>

    <div class="form-group">
      <label for="age" class="control-label">Age</label>
      <input type="number"
             class="form-control"
             id="age"
             ng-model="formModel.age"
             required="required"
             min="18"
             max="65"
             ng-min-err-type="tooYoung"
             ng-max-err-type="tooOld"
        />
    </div>

    <div class="form-group">
      <label for="sex" class="control-label">Sex</label>
      <select name="sex" id="sex" class="form-control" ng-model="formModel.sex"  required="required">
        <option value="">Please choose</option>
        <option value="male">Mail</option>
        <option value="femail">Femail</option>
      </select>
    </div>

    <div class="form-group">
      <label for="password" class="control-label">Password</label>
      <input type="text" class="form-control" id="password" ng-model="formModel.password"  required="required" ng-minlength="6"/>
    </div>

    <div class="form-group">
      <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
      <button class="btn btn-primary"
              ladda = "submitting"
              data-style="expand-right"
              type="submit">
        正在注册...
        注册
      </button>
    </div>

      <pre>
        {{formModel | json}}
      </pre>
  </form>
</div>
<script src="../node_modules/angular/angular.min.js"></script>

<script src="form_validation_auto.js"></script>
<script src="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>
<script src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../node_modules/angular-localize/angular-localize.min.js"></script>

<script src="../bower_components/ladda/dist/spin.min.js"></script>
<script src="../bower_components/ladda/dist/ladda.min.js"></script>
<script src="../bower_components/angular-ladda/dist/angular-ladda.min.js"></script>

</body>
</html>

 

如上,先看提交按钮:

 

<div class="form-group">
  <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
  <button class="btn btn-primary"
          ladda = "submitting"
          data-style="expand-right"
          type="submit">
    正在注册...
    注册
  </button>
</div>

 


ladda属性值为bool值,true表示显示动态等待效果,false不出示动态等待效果,这里的submitting是scope中的一个属性
● data-style=”expand-right”表示在按钮的左边突显动态等待效果

再拿表单中的Age字段来说:

 

<div class="form-group">
  <label for="age" class="control-label">Age</label>
  <input type="number"
         class="form-control"
         id="age"
         ng-model="formModel.age"
         required="required"
         min="18"
         max="65"
         ng-min-err-type="tooYoung"
         ng-max-err-type="tooOld"
    />
</div>

 

个中,min,
max为AgularJS的directive,而ng-min-err-type是angular-auto-validate的directive。那里坚守的常规是ng-AngularJS表单验证的directive名称-err-type,而tooYoung和tooOld的听从是怎么,又是在哪个地方用上了呢?

是在module层面用上了,定义在了form_validation_auto.js文件中。

 

var myApp1 = angular.module('myApp1',['jcs-autoValidate','localize','angular-ladda']);

myApp1.run(function(defaultErrorMessageResolver){
    defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages){
        errorMessages['tooYoung'] = '年龄必须小于{0}';
        errorMessages['tooOld'] = '年龄不能大于{0}';
        errorMessages['badUsername'] = '用户名只能包含数字、字母或下划线';
    });
});

myApp1.controller('myCtrl1', function($scope, $http){
    $scope.formModel = {};
    $scope.submitting = false;

    $scope.onSubmit = function(){

        $scope.submitting = true;
        console.log('已提交');
        console.log($scope.formModel);

        $http.post('url',$scope.formModel)
            .success(function(data){
                console.log(':)');
                $scope.submitting = false;
            })
            .error(function(data){
                console.log(':(');
                $scope.submitting = false;
            });
    };
});

 

如上,在run方法中动用angular-auto-validate的defaultErrorMessageResolver服务,对错误音信进行为了自定义。页面上的tooYoung和tooOld和那里的errorMessages[‘tooYoung’]和errorMessages[‘badUsername’]对应。

发表评论

电子邮件地址不会被公开。 必填项已用*标注