• jQuery 页面校验


    表单验证

    使用方法:

    第一步:在页底引入js http://st.beisen.com/common/validor.js(基于jquery的组件,因此保证已经引入了jquery库文件 第二步:提交验证 $("#form_v").validate(); (form_v为form的id) 第三步:验证规则对接方式 以class形式与input等项对应关联, 1:<input type="text" class="text required"/>为验证必填 2:class="text {required:true,minlength:5,equalTo:'#email',accept:'com'}" 必填,最小长度为5,值必须以id为email的对象value值一致,必须以com结尾 第三步:验证项说明 required: "必填", remote: "修正验证,一般值为一个link,比如一个验证用户名唯一的ajax页面", email: "邮箱格式", url: "网址格式", number: "数字格式", digits: "整数格式", accept: "拥有合法后缀名的字符串", equalTo: "相同值验证,用于验证密码", maxlength: "字符串长度上限", minlength: "字符串长度下限", rangelength: "字符串长度区间", range: "字符串大小上限", specialchar: "不能输入特殊字符",(new) max: "字符串最大值", min: "字符串最小值", 第四步:扩展方式 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); 在对应的input上的class里添加isZipCode即可 第五步:修改默认提示信息 {messages:{remote:'用户名已存在'}} 可以设置不同验证下同一输入框的反馈信息 特殊说明:remote remote值为一个程序验证页面,只需返回ture或false即可,下面例子中请输入admin1验证
    • <input type="text" class="text uname {required:true,messages:{remote:'用户名已存在'}}" remote="i/u.asp" name="uname" id="uname" />
    • <input type="text" class="text required email" name="email" id="email" />
    • <input type="text" class="text {required:true,minlength:5,equalTo:'#email',accept:'com'}" name="email2" />
    • <input type="text" class="required digits" name="digits" />
    • <input type="text" class="text required" name="requ" />
    • <input type="text" class="text required url" name="url" />
    • <input type="text" class="text require isZipCode" name="zipcode" />
    • <input type="text" class="text {range:[13,23],min:15}" name="myage" />
    • <textarea name="desc" id="desc" cols="40" rows="3" class="required" style="300px"></textarea>
    • <select class="required">……………………</select>
    • <div class="InputGroup">
      <input type="checkbox" name="formwhere" class="checkbox required" /><label class="labelright">报纸</label>
      <input type="checkbox" name="formwhere" class="checkbox required" /><label class="labelright">电视</label>
      <input type="checkbox" name="formwhere" class="checkbox required" /><label class="labelright">网络</label>
      </div>
    • <input type="radio" name="sex" class="checkbox required" /><label class="labelright">男</label>
      <input type="radio" name="sex" class="checkbox required" /><label class="labelright">女</label>
      <input type="radio" name="sex" class="checkbox required" /><label class="labelright">保密</label>
  • 相关阅读:
    SpringBoot非官方教程 | 第九篇: springboot整合Redis
    SpringBoot非官方教程 | 第八篇:springboot整合mongodb
    SpringBoot非官方教程 | 第七篇:springboot开启声明式事务
    SpringBoot非官方教程 | 第六篇:springboot整合mybatis
    SpringBoot非官方教程 | 第五篇:springboot整合 beatlsql
    SpringBoot非官方教程 | 第四篇:SpringBoot 整合JPA
    SpringBoot非官方教程 | 第三篇:SpringBoot用JdbcTemplates访问Mysql
    SpringBoot非官方教程 | 第二篇:Spring Boot配置文件详解
    SpringBoot非官方教程 | 终章:文章汇总
    SpringBoot非官方教程 | 第一篇:构建第一个SpringBoot工程
  • 原文地址:https://www.cnblogs.com/a311300/p/1793833.html
Copyright © 2020-2023  润新知