一个例子

  

<%@ 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>

boostrapvalidator的更多相关文章

  1. 关于boostrapValidator动态添加字段(addField)验证的bug

    每次码博客,都觉得自己怀才不遇,哎~脑袋有瑕疵,文笔拿不粗手,就直接上干货吧. 在使用boostrapValidator这个验证插件的时候,如果某一个字段是动态添加来的,我们需要调用方法:addFie ...

  2. JS组件系列——Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  3. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  5. 双重保险——前端bootstrapValidator验证+后台MVC模型验证

    我们在前端使用BoostrapValidator插件验证最基本的格式要求问题,同时在后台中,使用MVC特有的模型验证来做双重保险.对于boostrapValidator我就不说了,具体请看<bo ...

  6. Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. BootstrapValidator:表单验证神器

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  8. Bootstrap之Form表单验证神器: BootstrapValidator(转)

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

随机推荐

  1. (6)servlet-创建一个servlet类

    1,在项目的src目录下,右键[New]-[Servlet] 2,在弹出窗口中填写信息 Package:所在包名 Name:servlet的类名 Which method stubs would yo ...

  2. YTU 2911: 我想放假

    2911: 我想放假 时间限制: 1 Sec  内存限制: 128 MB 提交: 124  解决: 46 题目描述 小明的弟弟上小学了,每次刚入学就想知道什么时候放假,但是每学期开学的日子和每学期的有 ...

  3. JS处理空格

    JS处理空格 2010-10-27 11:48:32|  分类: 技术-JS |  标签:js  空格  |字号 订阅     /*删除两侧空格*/ function trim(ui){        ...

  4. 使用JSTL 对在页面上对 0,0,1 的分割处理 forTokens

    使用JSTL 对在页面上对 0,0,1 的分割处理 <tr onmouseover="currentcolor=this.style.backgroundColor;this.styl ...

  5. 异常备忘:java.lang.UnsupportedClassVersionError: Bad version number in .class file

    转自:https://blog.csdn.net/myyugioh/article/details/7724915 今天在导入一个工程时,编译并打包到Tomcat后,发现出现java.lang.Uns ...

  6. Gym 100962J Jimi Hendrix (树形DP)

    题意:给定一棵树,然后每条边有一个字母,然后给定一行字符串,问你能不能从这棵树上找到,并输出两个端点. 析:树形DP,先进行递归到叶子结点,然后再回溯,在回溯的时候要四个值,一个是正着匹配的长度和端点 ...

  7. CF896C Willem, Chtholly and Seniorious(珂朵莉树)

    中文题面 珂朵莉树的板子……这篇文章很不错 据说还有奈芙莲树和瑟尼欧里斯树…… 等联赛考完去学一下(逃 //minamoto #include<bits/stdc++.h> #define ...

  8. 安装MySQL需要注意的事项

    一.安装MySQL之后,怎样启动MySQL,以及登录.查看数据库操作? 用管理员身份运行cmd或power shell 二.当然有可能会出现不能在cmd或power shell中登录数据库账户 造成这 ...

  9. hdu 1025 Constructing Roads In JGShining's Kingdom

    本题明白题意以后,就可以看出是让求最长上升子序列,但是不知道最长上升子序列的算法,用了很多YY的方法去做,最后还是超时, 因为普通算法时间复杂度为O(n*2),去搜了题解,学习了一下,感觉不错,拿出来 ...

  10. DFS Codeforces Round #306 (Div. 2) B. Preparing Olympiad

    题目传送门 /* DFS: 排序后一个一个出发往后找,找到>r为止,比赛写了return : */ #include <cstdio> #include <iostream&g ...