zoukankan      html  css  js  c++  java
  • angular表单验证

    构建一个ng表单

    1.确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=”novalidate”

    2.form中不能有action属性。提交交由ng-submit处理

    3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

    <form name="form" novalidate="novalidate">
      <label name="email">Your email</label>
      <input type="email" name="email" ng-model="email" placeholder="Email Address" />
    </form>

    angular 验证

    1. ng默认提供了验证,验证是否已输入文字,只需在标签上加上required

    <input type="text" ng-model="user.name" required />

    2. 验证至少输入{number}个字符,使用指令ng-minlength=“{number}”

    <input type="text" ng-model="user.name" ng-minlength="5" />

    3. 验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”

    <input type="text" ng-model="user.name" ng-maxlength="20" />

    4. 确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/"

    <input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />

    5. 验证输入是一个Email,设置input的type属性为email

    <input type="email" name="email" ng-model="user.email" />

    6. 验证输入是一个数字,设置input的type属性为number

    <input type="number" name="number" ng-model="user.age" />

    7. 验证输入是一个URL,设置input的type属性为url

    <input type="url" name="homepage" ng-model="user.weburl" />

    8. $pristine表示用户是否修改了表单。如果为ture,表示没有修改过   formName.$pristine;

    $dirty当且用户是否已经修改过表单  formName.$dirty

  • 相关阅读:
    bzoj1691 [Usaco2007 Dec]挑剔的美食家
    cf493D Vasya and Chess
    cf493C Vasya and Basketball
    cf493B Vasya and Wrestling
    cf493A Vasya and Football
    bzoj1106 [POI2007]立方体大作战tet
    bzoj1537 [POI2005]Aut- The Bus
    bzoj1103 [POI2007]大都市meg
    bzoj1935 [Shoi2007]Tree 园丁的烦恼
    poj2299 Ultra-QuickSort
  • 原文地址:https://www.cnblogs.com/maochunyan/p/6751863.html
Copyright © 2011-2022 走看看