美文网首页
parsley.js(表单认证)

parsley.js(表单认证)

作者: 芹菜斯_嘉丽 | 来源:发表于2016-12-09 16:09 被阅读0次

特点:只需要进行简单的配置可以实现表单的验证功能。
主要特性:
·用户体验好 ·配置方便 ·免费 ·性能比较好


内建的验证
•required:要求输入
•Not blank:不能为空
•Min length:最小长度
•Max length:最大长度
•Range length:长度区间
•Min:最小值
•Max:最大值
•Range:区域值
•RegExp:正则表达式
•Equal To:等于
•Min check:检查选择的checkbox的最少数量
•Max check:检查选择的checkbox的最多数量
•Range check:检查选择的checkbox的区间数量
•Remote:ajax验证


DMO

<form id="demo-form" data-parsley-validate="" action="http://www.baidu.com">   
 <label for="fullname">Full Name * :</label>  
  <input type="text" class="form-control" name="fullname" 
data-parsley-trigger="change"
           data-parsley-required="true"
           data-parsley-required-message="用户名不可为空"
           data-parsley-minlength="6" 
          data-parsley-minlength-message="用户名位数不可少于6位"
           data-parsley-maxlength="29"
           data-parsley-pattern=(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}           data-parsley-pattern-message="必须为字母或数字"    ><br/>
    <label for="email">Email * :</label>
    <input type="email" class="form-control" 
name="email" 
data-parsley-trigger="change" 
required="">    <br/>
    <label for="gender">Gender *:</label>  
  <p>        M: <input type="radio" name="gender" id="genderM" value="M" required=""> 
       F: <input type="radio" name="gender" id="genderF" value="F">    </p> <br/> 
   <input type="submit" class="btn btn-default" value="validate"></form>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/parsley.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#demo-form').parsley().on('field:validated', function() {
            var ok = $('.parsley-error').length === 0;
            $('.bs-callout-info').toggleClass('hidden', !ok);
            $('.bs-callout-warning').toggleClass('hidden', ok);        })               .on('form:submit', function() {
//                    return false; 
// Don't submit form for this demo
                });    });
</script>

还可以自定义提示样式和验证方式

<small>待学习</small>

相关文章

网友评论

      本文标题:parsley.js(表单认证)

      本文链接:https://www.haomeiwen.com/subject/ksoemttx.html