记录一下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. （7）javascript的程序控制结构及语句------（2）循环控制语句、跳转语句、对话框

    一.循环控制语句 循环语句主要就是在满足条件的情况下反复执行某一个操作,循环控制语句主要包括while语句.do...while语句 和for语句. 1.While语句 语法: While(条件表达式 ...

  2. （DP）51NOD 1002 数塔取数

    一个高度为N的由正整数组成的三角形,从上走到下,求经过的数字和的最大值. 每次只能走到下一层相邻的数上,例如从第3层的6向下走,只能走到第4层的2或9上.      5   8 4  3 6 9 7 ...

  3. python之条件判断、循环和字符串格式化

    1. python的条件判断:if和else 在条件判断中可以使用算数运算符 等于:== 不等于:!= 大于:> 小于:< 大于等于:>= 小于等于:<= 示例1: usern ...

  4. bzoj 4859 [BeiJing2017]机动训练

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4859 题解 和管道取珠类似 首先把平方转化成两条路径经过的图案相同的方案数 对于一条路径 方 ...

  5. Iahub and Xors Codeforces - 341D

    二维线段树被卡M+T...于是去学二维树状数组区间更新区间查询 树状数组维护数列区间xor的修改.删除(就是把原问题改成一维): 以下p*i实际都指i个p相xor,即(i&1)*pa表示原数列 ...

  6. 【学习笔记】深入理解js原型和闭包（16）——完结

    之前一共用15篇文章,把javascript的原型和闭包讲解了一下. 首先,javascript本来就“不容易学”.不是说它有多难,而是学习它的人,往往都是在学会了其他语言之后,又学javascrip ...

  7. Excuse me？这个前端面试在搞事！

    金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 boy 转述一下. 以下是我一个朋友的故事,真的不是我. f ...

  8. android studio 定时器操作 实现定时执行相关任务

    package ipget.wenzheng.studio.ipget; import android.os.Bundle; import android.os.Handler; import and ...

  9. Android中进程与线程及如何在子线程中操作UI线程

    1. Android进程 一个应用程序被启动时,系统默认创建执行一个叫做"main"的线程.这个线程也是你的应用与界面工具包(android.widget和android.view ...

  10. Data Center Manager Leveraging OpenStack

    这是去年的一个基于OpenStack的数据中心管理软件的想法. Abstract OpenStack facilates users to provision and manage cloud ser ...