Form表单的验证
来源：互联网 发布：驱动程序软件安装设置 编辑：程序博客网 时间：2024/05/16 13:57
在开发中难免会遇到Form表单的验证，今天通过一个大牛的讲解，通过Bootstrap验证表单内容，代码如下：
<!DOCTYPE html><html><head> <title>BootstrapValidator demo</title> <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script></head><body> <div class="container"> <div class="row"> <!-- form: --> <section> <div class="page-header"> <h1>Bootstrap Validate plugin</h1> </div> <div class="col-lg-8 col-lg-offset-2"> <form id="defaultForm" method="post" action="target.php" class="form-horizontal"> <fieldset> <legend>Not Empty validator</legend> <div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-5"> <input type="text" class="form-control" name="username" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Country</label> <div class="col-lg-5"> <select class="form-control" name="country"> <option value="">-- Select a country --</option> <option value="fr">France</option> <option value="de">Germany</option> <option value="it">Italy</option> <option value="jp">Japan</option> <option value="ru">Russia</option> <option value="gb">United Kingdom</option> <option value="us">United State</option> </select> </div> </div> <div class="form-group"> <div class="col-lg-5 col-lg-offset-3"> <div class="checkbox"> <input type="checkbox" name="acceptTerms" /> Accept the terms and policies </div> </div> </div> </fieldset> <fieldset> <legend>Regular expression based validators</legend> <div class="form-group"> <label class="col-lg-3 control-label">Email address</label> <div class="col-lg-5"> <input type="text" class="form-control" name="email" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Website</label> <div class="col-lg-5"> <input type="text" class="form-control" name="website" placeholder="http://" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">US Phone number</label> <div class="col-lg-5"> <input type="text" class="form-control" name="phoneNumberUS" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">UK Phone number</label> <div class="col-lg-5"> <input type="text" class="form-control" name="phoneNumberUK" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Hex, RGB, HSL, Keyword color</label> <div class="col-lg-3"> <input type="text" class="form-control" name="color" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">All colors</label> <div class="col-lg-3"> <input type="text" class="form-control" name="colorAll" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">US zip code</label> <div class="col-lg-3"> <input type="text" class="form-control" name="zipCode" /> </div> </div> </fieldset> <fieldset> <legend>Identical validator</legend> <div class="form-group"> <label class="col-lg-3 control-label">Password</label> <div class="col-lg-5"> <input type="password" class="form-control" name="password" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Retype password</label> <div class="col-lg-5"> <input type="password" class="form-control" name="confirmPassword" /> </div> </div> </fieldset> <fieldset> <legend>Other validators</legend> <div class="form-group"> <label class="col-lg-3 control-label">Ages</label> <div class="col-lg-3"> <input type="text" class="form-control" name="ages" /> </div> </div> </fieldset> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </section> <!-- :form --> </div> </div><script type="text/javascript">$(document).ready(function() { $('#defaultForm').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: 'The username is not valid', validators: { notEmpty: { message: 'The username is required and can\'t be empty' }, stringLength: { min: 6, max: 30, message: 'The username must be more than 6 and less than 30 characters long' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username can only consist of alphabetical, number, dot and underscore' } } }, country: { validators: { notEmpty: { message: 'The country is required and can\'t be empty' } } }, acceptTerms: { validators: { notEmpty: { message: 'You have to accept the terms and policies' } } }, email: { validators: { notEmpty: { message: 'The email address is required and can\'t be empty' }, emailAddress: { message: 'The input is not a valid email address' } } }, website: { validators: { uri: { allowLocal: true, message: 'The input is not a valid URL' } } }, phoneNumberUS: { validators: { phone: { message: 'The input is not a valid US phone number' } } }, phoneNumberUK: { validators: { phone: { message: 'The input is not a valid UK phone number', country: 'GB' } } }, color: { validators: { color: { type: ['hex', 'rgb', 'hsl', 'keyword'], message: 'Must be a valid %s color' } } }, colorAll: { validators: { color: { } } }, zipCode: { validators: { zipCode: { country: 'US', message: 'The input is not a valid US zip code' } } }, password: { validators: { notEmpty: { message: 'The password is required and can\'t be empty' }, identical: { field: 'confirmPassword', message: 'The password and its confirm are not the same' } } }, confirmPassword: { validators: { notEmpty: { message: 'The confirm password is required and can\'t be empty' }, identical: { field: 'password', message: 'The password and its confirm are not the same' } } }, ages: { validators: { lessThan: { value: 100, inclusive: true, message: 'The ages has to be less than 100' }, greaterThan: { value: 10, inclusive: false, message: 'The ages has to be greater than or equals to 10' } } } } });});</script></body></html>在DOM树加载完成后执行这段代码可以实现对Form表单的验证。
注释：‘containerForm’是Form表单的ID，fields:是验证字段（即是文本输入框中的内容）， phone: 是对数字的校验；name和digits是input设定的name值。
很简单很实用的表单验证方法。
附上链接：https://github.com/nghuuphuoc/bootstrapvalidator/blob/master/demo/validators.html
0 0
- Form表单的验证
- form表单验证的原理
- jQuery的form表单验证
- form表单常用的验证
- 简单的form表单验证
- javascript验证表单form的通用函数
- 关于Form表单的提交与验证？？？
- form表单中属性的有效性验证
- 一个关于form表单验证的js
- JS对form表单的验证
- ExtJS 的表单验证机制(Form Validation)
- ExtJS 的表单验证机制(Form Validation)
- Struts 1.x 表单的Form验证
- form表单验证的第二种函数
- yii2关闭form表单的实时验证
- 基于jquery的form表单验证
- 超方便的form表单验证
- 谈谈Form表单验证
- HDU 1159 - Common Subsequence [最长公共子序列]
- uva 11992 Fast Matrix Operations （线段树区间更新）
- 记一次Android开发GIF功能踩过的坑
- G - Balanced Lineup POJ 3264 (线段树+区间查询无更新)
- java中同步(synchronized)详解
- Form表单的验证
- ramdisk 和 ramfs 文件系统 （initrd 和 initramfs ）
- 《管理的常识》第四章<什么是领导>读书笔记
- 第一篇博客
- csu 1562: Fun House （DFS）
- Linux网络编程学习之---简单局域网FTP文件传输服务器
- OC学习之道:OC对象,字典,集合的使用方法NSDictionary,NSMutableDictionary, NSSet,NSMutableSet,NSCountedSet
- GitHub 优秀的 Android 开源项目
- Android NDK开发环境搭建记录
