boostrapvalidator
2024-09-07 09:18:26
一个例子
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<jsp:include page="/views/common/JsAndCss.jsp"/>
<title>form表单的校验</title>
</head>
<body> <div class="container">
<div style="" class="content-center w-500 m-t40 h-600"> <!-- class都是bootstrap定义好的样式,验证是根据input中的name值 -->
<form id="defaultForm" class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-2">用户名</label>
<div class="col-md-10">
<input class="form-control" name="username" type="text" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">密码</label>
<div class="col-md-10">
<input class="form-control" name="password" type="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">邮箱</label>
<div class="col-md-10">
<input class="form-control" name="email" type="text" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<input class="btn btn-success col-md-4 col-md-offset-4" name="submit" type="submit" value="提交">
</div>
</form>
</div>
</div>
<script type="text/javascript"> $(document).ready(function(){
$("#defaultForm").bootstrapValidator({
message:"不进行校验的值!",
feedbackIcons:{//输入不同的状态,显示的图片的样式不同
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{//校验
username:{//键名username和name中的值对应
validators:{
notEmpty:{//非空校验
message:"用户名称不能为空"
},
stringLength:{//长度校验
min:6,
max:10,
message:"用户名长度在6-10位之间"
},
regexp:{//使用正则表达式
regexp:getReg().num,
message:"只能使用数字"
},
/*identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},*/
}
},
password:{
validators:{
notEmpty:{
message:"密码不能为空"
}
}
},
email:{
validators:{
notEmpty:{
message:"邮箱地址不能为空"
},
emailAddress:{//邮箱地址的校验
message:"邮箱格式不正确"
} }
} } }) }) </script>
</body> </html>
最新文章
- 使用Ivy管理项目中的依赖
- PowerDesigner给两个表添加reference,中间显示外键信息步骤
- MSSQL 2005数据库与SP4补丁安装
- SVM对偶形式
- Gap Locks 区间锁
- php审核操作
- JavaScript设计模式读书笔记之一:接口
- Luogu P3371 【模板】单源最短路径
- 简述Handler机制
- 一个php技术栈后端猿的知识储备大纲
- 宿主机无法访问linux虚机中的网站
- .NET Framework VS .NET Core
- 面向对象编程思想(OOP)
- servlet之小demo(四)
- LeetCode 101. Symmetric Tree 判断对称树 C++
- CentOS 7 lnmp环境配置laravel项目的问题总结!
- Java高并发和多线程系列 - 1. 线程基本概念
- 【工具相关】Web-Sublime Text2-安装 Package Control
- Java知多少(97)绘图模式概述
- express中间件代理实现跨域