记录一下angular可以直接用的输入框校验器，外加一个国内手机号码的校验

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../js/lib/angular.js"></script>

<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.top5 {

    margin-top: 5px;

}

/**可以自行添加以下四个css类，在校验的时候输入框会自动显示对应的样式*/

.ng-invalid {

    border-color: red;

    border-width: 0.5px;

}

,

.ng-valid {

}

,

.ng-pristine {

}

,

.ng-dirty {

}

,

.ng-invalid-required {

}

,

.ng-invalid-minlength {

}

,

.ng-valid-max-length {

}

,

</style>

</head>

<body ng-app="myApp" ng-controller="myController">

    <div class="form-group">

        <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid"

            type="submit" value="提交" />

    </div>

    <form name='myForm'>

        <div class="row">

            <span class="col-md-2 text-left">必填:</span><input type="text"

                name="required" required ng-model="name" /></span>

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">最少五个字符:</span><input type="text"

                name="minLength" ng-minlength="5" ng-model="minLength" /></span>

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">最多五个字符:</span><input type="text"

                name="maxLength" ng-maxlength="5" ng-model="maxLength" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">邮件格式:</span><input type="email"

                name="email" ng-model="email" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">数字:</span><input type="number"

                name="number" ng-model="number" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">URL:</span><input type="url" name="url"

                ng-model="url" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">手机号码:</span><input type="text"

                name="phone" ng-model="phone" ng-pattern="/^1[0-9]{10}$/" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">正则表达式:</span><input type="text"

                name="regx" ng-model="pattern" ng-pattern="/[a-zA-Z]/" />

        </div>

        <div class="top5">

            必填项绑定的数据:<span>{{name}},</span><span>没有被修改:</span> <span>{{myForm.required.$pristine

                }},</span>,<span>被修改了:</span><span>{{myForm.required.$dirty}}</span>

        </div>

        <div class="top5">最少五个字符绑定的数据:{{minLength}},校验是否通过:{{myForm.minLength.$valid}}，是否验证不通过:{{myForm.minLength.$invalid}}</div>

        <div class="top5">最多五个字符绑定的数据:{{maxLength}},详情:{{myForm.maxLength.$error}}</div>

        <div class="top5">email绑定的数据：{{email}}</div>

        <div class="top5">数字绑定的数据：{{number}}</div>

        <div class="top5">URL绑定的数据:{{url}}</div>

        <div class="top5">手机号码绑定的数据:{{phone}}，是否校验通过：{{myForm.phone.$valid}}</div>

        <div class="top5">正则绑定的数据:{{pattern}}</div>

    </form>

    <script>

 angular.module('myApp',[]).controller('myController',function($scope){

     //检查表单是否有修改

     });

</script>

</body>

</html>

静态效果如下：

本文参考自《angular权威教程》以及 http://www.cnblogs.com/rohelm/p/4033513.html，文章里还有一些更深入的内容，值得一读

validate 常用的输入框校验的更多相关文章

  1. 使用validate()方法进行输入校验 --Struts2框架

    服务器端的输入校验包含两种方式:硬编码方式和配置文件方式.本文演示硬编码方式中使用validate()方法进行输入校验. 1.项目目录结构: 2.项目核心代码: BookAction.java: pu ...

  2. Validate常用校验

    1.首先将jQuery.js和jquery.validate.js加入对应的页面中,如果要中文的提示语还要把messages_zh.js加入,以及对应的css文件. <link href=&qu ...

  3. JQuery -- Validate, Jquery 表单校验

    1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...

  4. easyui validate -- radio、checkbox 校验扩展，事件域名

    事件域名: $(dom).on('click.myNameSpace',function(){ ... }),其中‘.myNameSpace’便是域名: 目前作用:$(dom).off('click. ...

  5. Java常用的正则校验

    1.非负整数: (^[1-9]+[0-9]*$)|(^[0]{1}$) 或 (^[1-9]+[0-9]*$)|0 2.非正整数: (^-[1-9]+[0-9]*$)|(^[0]{1}$) 或 (^-[ ...

  6. springmvc JSR303 Validate 注解式，校验数据

    参考:http://www.cnblogs.com/liukemng/category/578644.html 先进行配置: <!-- 默认的注解映射的支持 --> <mvc:ann ...

  7. input输入框校验

    1.只能输入数字,当输入不符字符删除,光标位置不变 //只能输入数字 function onlyNumTrue(obj){ var reg = /[^\d]/g; var pos = obj.sele ...

  8. eslint常用三种校验语句

    1.关闭对整段代码的校验 /* eslint-disable */ code /* eslint-enable */ 2.关闭当前行代码的校验 line code // eslint-disable- ...

  9. 微信小程序常用表单校验方法（手机号校验、身份证号（严格和非严格校验、验证码六位数字校验））

    util.js function isPhone(value) { if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) { return false } else { re ...

随机推荐

  1. bzoj 2565: 最长双回文串【manacher+线段树】

    因为我很愚蠢所以用了很愚蠢的O(nlogn)的manacher+线段树做法 就是开两个线段树mn和mx分别表示左端点在i的最长回文子串和右端点在i的最长回文子串 用manacher求出每个点的最长回文 ...

  2. IT兄弟连 JavaWeb教程 Servlet 状态管理 会话跟踪

    HTTP协议是无状态的,我们的客户端与服务器的每一次请求与响应,我们服务器都没有记忆能力将客户端与服务器的多次交互数据进行存储与管理共有两种技术实现: ●  基于客户端实现:Cookie,将状态保存在 ...

  3. P1229-神秘岛

    神秘岛 描述 Description FireDancer来到一个神秘岛,他要从岛的西头到东头然后在东头的码头离开.可是当他走了一次后,发现这个岛的景色非常的美丽,于是他从东头的传送门传到了西头,换了 ...

  4. HDU 6183 Color it(动态开点线段树)

    题目原网址:http://acm.hdu.edu.cn/showproblem.php?pid=6183 题目中文翻译: Time Limit: 20000/10000 MS (Java/Others ...

  5. Educational Codeforces Round 18 D

    Description T is a complete binary tree consisting of n vertices. It means that exactly one vertex i ...

  6. Palindrome Partitioning LightOJ - 1044（回文串最小分割数，O(n^2)预处理子串是否回文）

    题意:将一个字符串分割成最少的字符串,使得分割出的每个字符串都是回文串.输出最小的分割数. 方法(自己的):先O(n^2)(用某个点或某个空区间开始,每次向左右扩展各一个的方法)处理出所有子串是否回文 ...

  7. Android APK加壳技术方案

    Android APK加壳技术方案[1] Android APK加壳技术方案[2]

  8. AJPFX关于一维数组的声明与初始化

    一维数组:可以理解为一列多行.类型相同的数据,其中每个数据被称为数组元素:一维数组的声明方式:                type varName[]; 或 type[] varName;(推荐) ...

  9. Intent实现界面跳转、程序跳转

    一个程序往往由多个界面组成,界面之间的跳转,实质是Activity之间的跳转. 从当前程序跳转到其它程序,实质是启动了目标程序的入口Activity. Intent被称为意图,常用于组件之间的交互,可 ...

  10. postgresql版sde（10.4.1）新建数据库

    使用sde pg版,第一次建sde库就是新安装sde的方法 然而从第二次开始可以有其他方式 新建一般的pg数据再转为sde数据库: 首先用建一般的pg数据库 首先要新建数据库 数据库名:新建的数据库名 ...