[成都|荣耀师兄]JS-王帅|2017年06月23日的日报-技能树.IT修真院

发表于： 2017-06-23 22:24:54

1 1037

【JS-task10】如何进行表单验证？

小课堂【成都第140期】

分享人：王帅

一.背景介绍

JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力，提高数据传送的质量和效率。

HTML5自带的表单验证属性
js代码
js第三方插件

二.知识剖析

验证时间

输入时进行实时验证(.onchange) 京东注册
退出焦点时验证(.onblur) 修真院官网
提交表单时进行本地验证亚马逊登录

H5自带的表单验证属性

小例子

js代码

if/switch，或者正则表达式，DOM操作

缺点：代码量大，耗时多
优点：相比于第三方库，可以减少加载的js文件大小，样式灵活
如果网站的表但很少，或者格式简单，或者对性能的要求高，可以手工写

利用js第三方插件

优点：全站适用，手工代码量少

缺点：有可能加重服务器负担，样式相对固定

三.常见问题

1.表单验证常见的验证信息

2.不同的方法分别是什么写法?

四.解决方案

表单验证常见信息

是否为空（必填/选填）
字符长度（用户名，密码，姓名，电话，邮编，身份证）
大小写
标点，符号
是否支持中文
格式（邮箱，手机，银行卡）
两次密码
链接

主要介绍三大类写法，分别是：js原生写法、angular js的表单验证写法、angular插件ng-message写法。

五.编码实战

1.js原生写法

<form name="a" onsubmit="return test()">
    <input type="text" name="b" placeholder="输入不超过5个字符"><!--onsubmit表示表单提交时执行一段js代码，当该事件触发的函数中返回false时，表单就不会被提交，不能掉了return，否则表单永远会提交。-->
    <br>
    <input type="submit" name="Submit" value="check">
</form>
<br>
<script language="javascript">
    function test(){
        if(document.a.b.value==null || document.a.b.value==""){
            alert("请输入用户名");
            return false;
        }
        if(document.a.b.value.length>5) {
            alert("不能超过5个字符！");
            return false; //阻止表单提交
        }
    }
</script>

2.angularJs ng-show写法

<div ng-app="myApp">
     <form  ng-controller="validateCtrl" name="myForm" novalidate>
    <p>邮箱:<br>
        <input type="email" name="email" ng-model="email" required >
        <span style="color:red" ng-show="myForm.email.$error.required">邮箱是必须的。</span>
        <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"><!--ng-show 指令 true 时显示指定的 HTML 元素，$dirty表示表单有填写记录，$invalid字段内容是非法的-->
            <span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
        </span>

    </p>
    <p>
        <input type="submit" ng-disabled="myForm.email.$dirty && myForm.email.$invalid"><!--ng-disabled 中的表达式返回 true 则表单字段将被禁用-->
    </p>
</form>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function($scope) {
    });
</script>

4.angularjs ng-message(angular表单验证插件）（推荐）

<h2>angular-messages </h2>
<div ng-app='app' >
    <form  name="myForm" class="form-horizontal" novalidate>
         <label>是否填写、字符长短、邮箱格式</label><br>
         <input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required >
    <div style="color:red">
        <div ng-messages="myForm.name.$error">
            <div ng-message="required">必填项</div>
            <div ng-message="minlength">字符太短小于3</div>
            <div ng-message="maxlength">字符太长大于20</div>
            <div ng-message='email'>正确的邮箱格式</div>
</div>
    </div>
</form>
<script type="text/javascript">
        angular.module("app", ['ngMessages']);
 </script>