eg 表单数据校验 eg-validation

Apache-2.0
JavaScript
跨平台
2018-02-24
egzosn

eg表单数据校验,简单快速实现表单数据校验,扩展性强

简单入门

<!DOCTYPE html>
<html>
<head>
    <title>Validation Form Template</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-1.11.3.min.js"></script>
    <script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class='well'>
    <form class="form-horizontal" id="form" action="###">
        <div >QQ:<input type="text" id="email" eg-valid="true" name="email"  eg-tips="请输入QQ号" eg-qq  eg-success="校验通过"  > </div>
        <div >邮箱<input type="text"  eg-valid eg-email="正确的邮箱" eg-tips="请输入邮箱"  eg-required   eg-position="bottom"></div>
        <button type="submit" class="btn">登录</button>
    </form>
</div>

<script type="text/javascript" charset="utf-8">
    $(function () {
        $('#form').validation();
    })
</script>
</body>
</html>

以下为字段基本属性的解释

    1. eg-valid                     是否开启校验 默认值:true
    
    2. eg-tips                      空文本域获取焦点后的提示消息
    
    3. eg-position                  校验结果展示位置 top、right、bottom、left  默认值:right
    
    4. eg-inline                    文本域所有的校验结果指定节点展示
    
    5. eg-{校验规则名}               开启对应的校验规则, 值为校验提示文本
    
    6. eg-{校验规则名}-param         校验规则对应的附加参数,非必须,根据校验规则参数而定,多个用","(逗号)隔开
    
    7. eg-{校验规则名}-inline        文本域指定的校验规则校验结果指定节点展示
    
    8. eg-success                    文本域校验通过后的提示信息  默认值: 校验通过

以下几种默认的校验规则

    1. required                     必须输入的字段
    
    2. number                       必须输入合法的数字(负数,小数)
    
    3. digits                       必须输入整数
    
    4. decimal                      必须输入货币
    
    5. date                         必须输入正确格式的日期。日期校验 ie6 出错,慎用
    
    6. url                          必须输入正确格式的网址
    
    7. email                        必须输入正确格式的电子邮件
    
    8. char                         必须输入英文字符
    
    9. qq                           必须输入正确QQ
    
    10. phone                        必须输入正确手机号码
    
    11. equalto                      必须输入两次一至的字符,匹配文本域的唯一标识 : eg-equalto-param=#password 
    
    12. chinese                      必须输入输入汉字
    
    13. minlength                    必须输入至少3位,eg-minlength-param=3
    
    14. maxlength                    必须输入至多6位,eg-minlength-param=6
    
    15. length                       必须输入长度必须介于 {3} 和 {6} 之间的字符串(汉字算一个字符), eg-length-param=3,6
    
    16. min                          输入值不能小于3, eg-min-param=3
    
    17. max                          输入值不能大于6, eg-min-param=6
    
    18. pattern                      输入匹配对应的正则表达式, eg-pattern-param=/^\d+$/

以下讲解该校验组件可使用的几个选项的属性(构造时传入的参数)

    1. rules                        对象,校验规则集 
    
    2. isSubmit                     布尔型,校验通过后是否进行表单提交, 默认:true 进行表单提交
    
    3. valiAfter                    方法,所有表单域校验完成后回调方法
    
    4. valiSuccess                  方法,所有表单域校验完成并通过后回调方法

下面对rules规则集的属性讲解

简单案例

<!DOCTYPE html>
<html>
<head>
    <title>Validation add rules  Template</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-1.11.3.min.js"></script>
    <script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div id="form">
    <div >zip:<input type="text" eg-valid="true" eg-zip  eg-success="校验通过"> </div>
 </div>

<script type="text/javascript" charset="utf-8">
    $(function () {
        //这里增加邮编进行校验
        $('#form').validation({
               rules :{'zip':{validate: function(value) {return (/^[1-9][0-9]{5}$/.test(value) || /^.{4,15}$/.test(value));}, defaultMsg: '请输入正确邮编'}}
        });
    })
</script>
</body>
</html>

以下对eg-inline的使用案例

<!DOCTYPE html>
<html>
<head>
    <title>Validation inline Form Template</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-1.11.3.min.js"></script>
    <script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="form">
    <div >email1:<input type="text" eg-valid="true" eg-email=""  eg-required  eg-success="校验通过" eg-inline="#eg-inline"> </div>
    <div >email2:<input type="text" eg-valid="true" eg-email  eg-required  eg-email-inline="#eg-email-inline"> </div>
</div>
<br/>
email1 所有校验提示在此展示:<div id="eg-inline"></div>
<br/>
email2 邮箱校验提示在此展示:<div id="eg-email-inline"></div>
<br/>

<script type="text/javascript" charset="utf-8">
    $(function () {
        //这里增加邮编进行校验
        $('#form').validation({
            isSubmit: false
        });
    })
</script>
</body>
</html>
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

phalcon-进阶篇2(拦截器)

哈喽大家好啊!今天我们继续来说拦截器,拦截器在phalcon的文档里面称之为验证,但是我更喜欢叫做拦截器,拦截起主要是起到对于参数做验证的功能,如果你没有按照约定的规则来请求就报错,可以见得...

2016/05/07 13:39
299
2
phalcon模型验证

phalcon模型验证

2015/11/24 01:22
156
0
hibernate中Error applying BeanValidation relational constraints解决办法

Exception in thread "main" org.hibernate.HibernateException: Error applying BeanValidation relational constraints at org.hibernate.cfg.beanvalidation.BeanValidationIntegrator.ap...

2016/09/23 09:08
38
0
A potentially dangerous Request.Form value was ...

A potentially dangerous Request.Form value was detected from the client 针对这个问题,以前在.net Framework2.0里,只要修改 <pages validateRequest="false" /> 就可以 但是现在在4.0里,...

2013/02/05 10:59
17
0
Zend Studio --- Undefined Image file

关闭web resource 验证器 或安装插件

2015/01/13 17:24
1K
0
phalcon验证(validation)的全面理解

#文档中涉及验证有两种: 1. ``Phalcon\Validation`` 2. model中的``validation()`` 方法 # 基本验证器 ``Phalcon\Validation``是Phalcon的全局或者说通用验证器,也是所有验证器的基础,其他...

2016/11/15 01:38
117
0
让Spring Controller 的方法基本数据类型参数支持Bean Validation

我们知道Spring MVC层是默认可以支持Bean Validation的,尝试使用了一下感觉很不方便,只支持对Bean的验证,还需要在Bean后面加一个BindingResult作为参数。而在我们的工程中有很多接口都是基...

2014/04/18 10:54
8.7K
1
jQuery表单验证插件

jQuery表单验证插件

2014/06/25 17:54
34
0
Spring核心——数据校验

在Java数据校验详解中详细介绍了Java数据校验相关的功能(简称Bean Validation,涵盖JSR-303、JSR-349、JSR-380),本文将在Bean Validation的基础上介绍Spring框架提供的数据校验功能。 Spri...

2018/08/30 16:36
1K
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部