zoukankan      html  css  js  c++  java
  • 如何使用AngularJS对表单提交内容进行验证

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。它有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证。

    AngularJS对表单中常用的验证操作

    $dirty 表单有填写记录
    $valid 字段内容合法的
    $invalid 字段内容是非法的
    $pristine 表单没有填写记录
    $error 表单验证不通过的错误信息

    1.相关插件的导入:AngularJS和Jquery一样,是一种由程序员用js编写好然后封装起来的js插件,因此在使用之前要用以下代码来导入它。

     <script src="libs/angular.js"></script> 

    注:该js插件最好放在body之后,自己写的js代码则放在AngularJS之后防止产生错误

    2.在导入完AngularJS插件之后,我们首先要在body中创建一个form表单,用于接下来的操作,然后在表单上或者body上加上ng-app=""属性来确定AngularJS的作用域,一般

    推荐加在body上。

     <body ng-app="app" ng-controller="ctrl"></body> 

    注:ng-controller="ctrl"用于设置控制器。

    3.给form表单和input的name属性命名,给form及input设置name后会将form表单信息默认绑定到$scope作用域中,故可以使用formName.inputName.$验证操作 得到验证结果。

    <form class="form-horizontal" name="myForm" novalidate>
        <input type="text" name="name" >
        <input type="email" name="mail">
        <input type="password" name="pwd" >
    </form>

    novalidata用于禁止h5自带的表单验证,防止多余影响。

    例如:

    myForm.text.$dirty="true";表单被填写过
    myForm.text.$invalid"true";表单输入不合法
    myForm.text.$error.required="true";表单必填但未填。

    4.给input加上对应的验证:

    <input type="text" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{erro:myForm.name.$invalid&&myForm.name.$dirty}"/>
    <input type="email" name="mail" required />
    <input type="password" name="pwd" ng-model="user.pwd" pattern="^w{6,18}$"/>

    注:

    以上代码对text设置了最小长度4,最大长度10,必填的验证信息,

    对email则使用了email自带验证,增加了必填要求,

    对password则是设置了正则验证要求是6到18位的字母数字下划线。

    5.给提交按钮加上ng-disabled="myForm.$dirty&&myForm.$invalid"属性在表单输入不合法时将按钮禁用来阻止表单内容提交。

    注:myForm.$dirty&&myForm.$invalid表示在表单有输入的情况下输入错误。

    以上步骤完成之后表单的验证就完成了,也可以加上span的ng-show="myForm.name.$invalid&&myForm.name.$dirty"属性来设置在不同错误时出现不同的提示信息,这样,一个可以验证是否提交的表单就完成了。

  • 相关阅读:
    [Django]Windows下Django配置Apache示范设置
    《职场》笔记20061119
    Python Django还是RoR,这是一个问题
    收集证据:fsjoy.com的流氓推广和幕后流氓主子[updated]
    爱尔兰网友邀请我对Dublin交通监视器进行手机端开发
    {基于Applet的J2ME模拟器}和{microemulator}[J2ME推荐]
    中国移动IM飞信0802上线新版本 试用手记
    [AsyncHandle]什么引发了ObjectDisposedException?
    百度的“搜索背后的人”的战略
    [Python]检查你的站点的人气
  • 原文地址:https://www.cnblogs.com/wujianrui/p/6822492.html
Copyright © 2011-2022 走看看