Angular Js 表单验证?

    互联网/前端 64次点击 · 1168天前 · 乱世小熊
如何用Excel制作柱状图?如何在Excel中让一列数据按照另一列的数据进行排序? 乱世小熊

1条回答我要回复

    愿你无恙1168天前

      Anjular Js的验证必须在form表中才能生效,不在form中不生效。
      1. from表中进行设置<form name="actForm" novalidate>novalidate属性是禁止form表单原生态的校验,避免自定义校验产生冲突。
      2.requied 标识这是一个必填的选项,不能为空
      3.ng-pattern="/^([1-9]d*|[0]{1,1})$/" 是一个正则表达式输入第一位不为0的正整数,判定是否符合规则
      4.ng-show=" actForm.number.$dirty && actForm.number.$invalid" 当结果为true是展现,否则隐藏
      5.表单属性 

      利用这些表单属性,可以在表单提交时进行数据的检测。比如,所有的输入input是否符合要求

      $scope.save = function(){
      //$scope.actForm.$pristine actForm中没有输入内容,没有为true,
      //注意页面加载时赋予input值,只要没有改变就是true,重点是输入
      if($scope.actForm.$pristine){
      alert("表单信息没有填写或没有改变");
      return;
      }
      //$scope.actForm.$invalid 判定所有的输入是否合法,即是否符合你设置的规则,一个不符合就是false
      if( $scope.actForm.$invalid){
      alert("表单信息格式填写不正确");
      return;
      }
      <body ng-cOntroller="xheducationactController" >
      <div >
      <div >
      </div>
      </div>
      <form name="actForm" novalidate>
      <div >
      <br>
      <br>
      <div >
      <table >
      <tr>
      <td >{{'number' | translate }}</td>
      <td >
      <input type="text"
      name="number" ng-model="data.number" required
      ng-pattern="/^([1-9]d*|[0]{1,1})$/" />
      </td>
      <td >
      <span ng-show=" actForm.number.$dirty && actForm.number.$invalid">
      <span ng-show="actForm.number.$error.required">数字是必须的</span>
      <span ng-show="actForm.number.$error.pattern">必须是数字</span>
      </span>
      </td>
      </tr>
      <tr>
      <td >{{'chineseName' | translate }}</td>
      <td >
      <input type="text"
      name="chineseName" ng-model="data.chineseName"
      required ng-pattern="/^[u4E00-u9FA5]{0,}$/" />
      </td>
      <td >
      <span ng-show=" actForm.chineseName.$dirty && actForm.chineseName.$invalid" >
      <span ng-show="actForm.chineseName.$error.required">中文名是必须的</span>
      <span ng-show="actForm.chineseName.$error.pattern">必须是中文</span>
      </span>
      </td>
      </tr>
      </table>
      </div>
      <br>
      </div>
      <div >
      <input type="button"
      value="{{'baocun' | translate }}" title="{{'baocun' | translate }}"
      ng-if="!detail" ng-click="save();">
      <input type="button" value="{{'guanbi' | translate }}" title="{{'guanbi' | translate }}"
      ng-click="close();">

      </div>
      </form>
      </body>

    请先登录后,再回复