AngularJs的表单验证和只能输入大于等于0的正整数(自定义验证)

一、对输入输入框的验证：必填字段、最小长度、最大长度、正则表达式等

1、必填字段：required

//在输入框内加上required就说明此输入框是必填项，如果不填，点击提交等按钮不会成功
<input type="text" name="user" ng-model="user" required>

具体可参考 ：

//Angular 菜鸟 的表单验证示例

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

<p>用户名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  </span>
</p>
......
</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
});
</script>

2、最小长度验证：ng-minlength  (用户输入的长度小于指定的最小长度，验证将失败。)

<input type="text" name="password" ng-model="user.password" ng-minlength="6">

3、最大长度验证：ng-maxlength    （和最小长度同理）

二、只能输入大于等于0的正整数(自定义验证)

HTML代码：

<div class="modal-body">
    //为表单验证做好准备：class="form-horizontal valid-form" id="ediorForm"
   <form class="form-horizontal valid-form" id="ediorForm">

    //输入的值是必填项：required
     <label class="col-sm-2 control-label required" style="padding: 0;">输入的值：</label>
     <div class="col-sm-4">
        //输入框  添加自定义校验规则到 Validform：datatype="zeroOrPositiveInt" 
        //如果输入框为空显示：nullmsg="输入的值不能为空"
        //如果输入的内容没达到要求：errormsg="请输入 0 及 0 以上的整数"
        <input type="text" name="number" ng-model="number" 
               class="form-control" datatype="zeroOrPositiveInt" 
               nullmsg="输入的值不能为空" errormsg="请输入 0 及 0 以上的整数">
     </div>  

   </form>
</div>
<div class="modal-footer">
    //如果输入的内容没达到要求无法点击保存并提示输入框设置的相关内容
   <button type="button" class="btn btn-primary btn-sm" ng-click="ms.save();">保存</button>
</div>

Script代码：

JS验证内容：

// 添加自定义校验规则到 Validform---------$.extend的用法具体可参考官方文档或者菜鸟
    // $.extend的用法 $.extend(target, object1, objectN)就是将object1和objectN合并到target上
    // 这里的意思是：将自定义校验规则zeroOrPositiveInt添加（合并）到$.Datatype中

    $.extend($.Datatype, {
        // 自定义校验规则名称：zeroOrPositiveInt
        zeroOrPositiveInt: function (gets, obj, curform, regxp) {
            // 方法一：验证输入是否为大于等于 0 的正整数   /^[0-9]+$/
            // return /^[0-9]+$/.test(gets);

            // 方法二：验证输入是否为大于等于 0 的正整数   /^(0|[1-9][0-9]*)$/
            return /^(0|[1-9][0-9]*)$/.test(gets);
        }
    });

点击提交按钮：

//点击保存按钮
this.save = function (){
	if ($("#editorModal .valid-form").Validform().check() == false) {
		  return ;
	}

    //点击提交后要做的代码
}

如果注释有我理解错的，欢迎您提出并指正我的错误理解，谢谢