最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
BootStrap表单验证实例代码
时间:2022-06-25 14:34:32 编辑:袖梨 来源:一聚教程网
下面给大家分享bootstrap表单验证实例代码,具体代码如下所示:
代码如下 | 复制代码 |
<%@ page language="java"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../include/taglib.jsp"%> <%@include file="../include/common.jsp"%> |
--------------------------------------------------引入js----------------------------------------------------------------------
代码如下 | 复制代码 |
$(function() { //重置 $('#resetBtn').click(function(){ //清空表单验证内容 $('#formTest')[0].reset(); //清空表单验证信息 $('#formTest').bootstrapValidator('resetForm'); }); functionrandomNumber(min, max) { returnMath.floor(Math.random() * (max - min + 1) + min); }; $('#callbackshow').html([randomNumber(1, 100),'+', randomNumber(1, 200),'='].join(' ')); //校验 $('#formTest').bootstrapValidator({ message :'', feedbackIcons: { valid:'glyphicon glyphicon-ok', invalid:'glyphicon glyphicon-remove', validating:'glyphicon glyphicon-refresh' }, //验证用户名字 fields: { username: { message:'用户名验证失败', validators: { notEmpty: { message:'用户名不能为空' }, stringLength: { min: 2, max: 4, message:'名字长度只能为2-4位' }, regexp: { regexp: /^[u2E80-u9FFF]+$/, message:'只能为汉字' }, } },//end username birthday:{ validators: { notEmpty: { message:'生日不能为空' }, date:{ format:'YYYY/MM/DD', message:'输入正确的日期格式,YYYY/MM/DD' } } },//end birthday //验证email email: { validators: { notEmpty: { message:'邮箱地址不能为空' }, emailAddress: { message:'邮箱地址不对' } } },//end email password:{ validators: { notEmpty: { message:'密码不能为空' }, stringLength: { min: 6, max: 15, message:'密码长度最小为6最多为15' }, regexp: { regexp: /^[d]+$/, message:'只能为数字' }, } },//end password confirmPassword:{ validators: { notEmpty: { message:'密码不能为空' }, stringLength: { min: 6, max: 15, message:'密码长度最小为6最多为15' }, identical: { field:'password', message:'2次密码不一致' }, } },//end confirmPassword 'languages': { validators: { notEmpty: { message:'至少要选择一个' }, choice: { min: 2, max: 3, message:'选择2-3个' } } },//end languages callbacktest:{ validators: { callback:{ message:'输入错误', callback:function(value,validator){ varitems = $('#callbackshow').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]); console.log(sum); returnvalue == sum; } } } },//end callbacktest } });
//表单提交 $("#formTest").submit(function(ev){ev.preventDefault();}); $("#submitBtn").on("click",function(){ varbootstrapValidator = $("#formTest").data('bootstrapValidator'); bootstrapValidator.validate(); if(bootstrapValidator.isValid()){ $.ajaxRequest({ url :'www.baidu.com', }); }else{ return; } }); }); |
相关文章
- fgo国服5月20日周任务怎么攻略 fgo国服5月20日周任务攻略方法 05-20
- 原神4.6众贤之贤任务攻略 05-20
- 崩坏星穹铁道给我停止吧成就怎么获取 05-20
- 原神4.6往事亦新事任务攻略 原神4.6往事亦新事任务怎么做 05-20
- DNF手游帅气的名字都有哪些 DNF手游帅气的名字一览 05-20
- 原神4.6休憩之余任务攻略 原神4.6休憩之余任务怎么做 05-20