bootstrap用validate简单实现校验

最新推荐文章于 2023-12-25 13:59:59 发布
最新推荐文章于 2023-12-25 13:59:59 发布
阅读量689 收藏
点赞数 1
分类专栏： web 文章标签： 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wkfyynh/article/details/53426238
版权

validate的简单实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>
    <!--导包-->
	<script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
	<!--校验-->
	<script>
	/*	$(function(){
			//校验
			$("#f1").validate({
					rules:{
						username:{
							required:true,
						},
						password:{
							required:true,
							rangelength:[6,16]
						},
						repassword:{	
							equalTo:$("input[name='password']")
						}
					},
					messages:{
						username:{
							required:"请输入用户名"
						},
						password:{
							required:"请输入密码",
							rangelength:[6,16]
						},
						repassword:{	
							equalTo:"两次密码不同哦"
						}
					}
			});
		})*/
		
		//自定义校验
		$(function(){
				$.validator.addMethod("check",function(param,ele,value){
					//获取到ele的爷节点
						var e=ele.parentNode.parentNode;
												
						//先判断输入是否正确
						if(param!=null && param.length<=16 &¶m.length>=6)
						{
							//当不为空,并且长度在6和16之间时代表输入正确,将颜色变为绿色的样式
							//由于ele是JavaScript对象,所以如果要用jQuery的话需要包一下
						//	$(e).prop("class",$(e).prop("class")+" has-success");
//							e.cclassName="form-group";
						//将样式清空
							$(e).prop("class","form-group");	
							//追加样式
							e.className+=" has-success";
							return true;
						}else{
							//js方法将样式清空
							e.setAttribute("class","form-group");
//							$(e).prop("class","form-group");	
						//错误了,修改样式
						e.className+=" has-error";
						//清空后还原样式
						return false;
						}
				})
				
			$("#f1").validate({
					rules:{
						username:{
							check:true,
						},
						password:{
							check:true
						},
						repassword:{
							equalTo:$("input[name='password']")
						}
					},
					messages:{
						username:{
							check:"请输入用户名并且长度在6-16位之间"
						},
						password:{
							check:"请输入密码并且长度在6-16位之间",
							rangelength:[6,16]
						},
						repassword:{	
							equalTo:"两次密码不同哦"
						}
					}
					
			})
		})
	</script>
	<style>
	/*提示的颜色*/
		.form-group .error{
			color: red;	
		}
	</style>
  </head>
  <body>
    <div class="container">
    	<!--第一行-->
    	<div class="row">
    		<div class="col-sm-4"><img src="../img/logo2.png"/></div>
    		<div class="col-sm-4"><img src="../img/header.png"></div>
    		<div class="col-sm-4" style="margin-top: 10px;">
    			<!--登录注册购物车-->
    			<a href="" class="btn btn-primary">登录</a> 
    			<a href="" class="btn btn-primary">注册</a> 
    			<a href="" class="btn btn-danger">购物车</a>
    		</div>
    	</div>
    	
    	<!--第二行  导航栏-->
    	<div class="row">
    		<nav class="navbar navbar-default navbar-inverse">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
				      <a class="navbar-brand" href="#">首页</a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav">
				        <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
				        <li><a href="#">电脑办公</a></li>
				        <li class="dropdown">
				          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
				          <ul class="dropdown-menu">
				            <li><a href="#">电影</a></li>
				            <li><a href="#">风云</a></li>
				            <li><a href="#">你的名字</a></li>
				            <li role="separator" class="divider"></li>
				            <li><a href="#">龙猫</a></li>
				            <li role="separator" class="divider"></li>
				            <li><a href="#">更多链接</a></li>
				          </ul>
				        </li>
				      </ul>
				      <form class="navbar-form navbar-right" role="search">
				        <div class="form-group">
				          <input type="text" class="form-control" placeholder="Search">
				        </div>
				        <button type="submit" class="btn btn-default">Submit</button>
				      </form>
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
    	</div>
    	
    	<!--banner注册主体-->
    		<div class="row" style="background-image: url(../img/regist_bg.jpg);">
    			<div class="col-sm-8 col-sm-offset-2" style="border: 7px gainsboro solid; background-color: white;">
    				<div class="row" style="margin-top: 5px;">
    					  <div class="col-sm-offset-1"><a href=""><b><font size="4">用户注册</font></b></a></div>
    				</div>
    				
    				<div class="row">
    					<div class="col-sm-9 col-sm-offset-1">
	    						<form class="form-horizontal" id="f1">
									  <div class="form-group">
									    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
									    <div class="col-sm-10">
									      <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
									    </div>
									  </div>
									  <div class="form-group">
									    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
									    <div class="col-sm-10">
									      <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
									    </div>
									  </div>
									  
									  	  <div class="form-group">
									    <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
									    <div class="col-sm-10">
									      <input type="password" class="form-control" id="repassword" name="repassword" placeholder="请输入确认密码">
									    </div>
									    
									  </div>
									  	  <div class="form-group">
									    <label for="inputPassword3" class="col-sm-2 control-label">Email</label>
									    <div class="col-sm-10">
									      <input type="text" class="form-control" id="email" name="email" placeholder="请输入email">
									    </div>
									  </div>
									  
									  	  <div class="form-group">
									    <label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
									    <div class="col-sm-10">
									      <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
									    </div>
									  </div>
									  
						    	  <div class="form-group">
									    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
									    <div class="col-sm-10" style="margin-top: 5px;">
									      <input type="radio" checked="checked" id="man" name="man">男 
							      	  <input type="radio" id="woman" name="woman">女
									    </div>
									  </div>
									  
									  <div class="form-group">
									    <div class="col-sm-offset-2 col-sm-10">
									      <button type="submit" class="btn btn-danger">注册</button>
									    </div>
									  </div>
									</form>
    						
    					</div>
    				</div>
    			</div>
				</div>
    	
    	<!--底部-->
    	<div class="row" style="margin-top: 20px;">
    		<div class="col-xs-12"><img src="../img/footer.jpg"/ width="100%"></div>
    	</div>
    	<!--联系我们-->
    	<div class="row">
    		<div class="col-xs-12 text-center">
    			<ul class="list-inline">
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    				<li><a href="#">关于我们</a></li>
    			</ul>
    		</div>
    	</div>
    	<!--版权信息-->
    	<div class="row">
    		<div class="col-xs-12 text-center">
    			Copyright &copy; 2014-2017  御影年华版权所有
    		</div>
    	</div>
    </div>
    
  </body>
</html>


御影年华
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrapvalidator之API学习
nazhidao的专栏
05-31 5万+
最近项目用到了bootstrap框架，其中前端用的校验，采用的是bootstrapvalidator插件，也是非常强大的一款插件。我这里用的是0.5.2版本。 下面记录一下使用中学习到的相关API，不定期更新。 1. 获取validator对象或实例 一般使用校验是直接调用$(form).bootstrapValidator(options)来初始化validator。初始化后有两种
浅谈bootstrap表单验证插件BootstrapValidator
jingzhunhuoke9的博客
12-07 197
本篇推荐一款twitter做的BootstrapValidator，本身Bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜BootstrapValidator会出现很多款，但我只推荐这款（突然感觉自己有点“库【Steve 库里】吹”的感觉）。 相关教程推荐：《bootstrap教程》 ###一、一睹为快 为了简便的介绍，这里只做为空的check。 BootstrapValidator官方下载地址 ###二、资源引用 下载完资源包后，你可以看到如下的目录。 .
Bootstrap中的表单信息验证
2202_76088586的博客
08-29 1786
账号为6-16位字符
使用bootstrap的"form-control required"样式遇到的问题
qq_36937844的博客
08-28 4904
form表单中对文本框使用bootstrap的"form-control required"样式,未填依然可以提交 1.代码中设置了必填的样式,但是即使未填也可以提交上去.开始以为是按钮在form表单外面,所以造成了必填样式没作用,后来发现把按钮放进表单中,必填样式依然未生效.后来检查代码发现,button按钮绑定了事件,是通过事件提交,且事件中是对form表单进行提交,所以这里应该是没有问题的....
bootstrapValidator常用验证规则总结
qq_41040871的博客
12-07 3898
bootstrapValidator常用验证规则总结
bootstrap 5 表单验证
weixin_43727933的博客
07-25 4116
zpjbvalidator改编自jbvalidator是一个全新的基于jQuery的表单验证插件，它是为最新的Bootstrap5框架创建的，理论上支持Bootstrap3，Bootstrap4支持客户端和服务器端验证。在原有功能基础上，修改了其核心代码。为了区别与源代码，将文件名更改为zpjbvalidator.js。.........
WEB前端网页设计-Bootstrap4 表单
君逍遥o
04-12 746
WEB前端网页设计-Bootstrap4 表单
bootstrap使用validate实现简单校验功能
09-01
在Bootstrap中，为了实现表单的验证功能，通常会结合jQuery库以及jQuery Validate插件来使用。jQuery Validate是一个强大的验证插件，它提供了丰富的验证规则和自定义验证方法，能够帮助开发者轻松实现表单验证。 ...
基于BootStrap与jQuery.validate实现表单提交校验功能
10-20
学习前台后台最开始接触的业务都是用户注册和登录,下面通过本文给大家介绍BootStrap与jQuery.validate实现表单提交校验功能，感兴趣的朋友一起学习吧
轻量级bootstrap校验插件bootstrapvalidate
06-01
BootstrapValidator是一款轻量级的jQuery插件，专为Bootstrap框架设计，用于实现表单验证功能。这个插件简化了在Bootstrap界面中创建复杂且用户友好的验证规则的过程，提供了丰富的预定义验证方法和自定义验证规则的...
bootstrap实用校验功能
qq_29539827的博客
06-10 1938
曾经做过的页面上的页面输入校验， 记录下来以后就不用再写第二次了，c来直接用。。 1.特殊字符校验 2.ip规则校验 3.起止时间检查 4.字符串转大/小写 5.联动其他输入框必填（动态红色星号标记） 6.清除下拉选项 7.文件上传 8.是否为空（必填） 9.打印页面填写信息（用于再次确认） 校验特殊字符 function ValidateSpecialCharacter(){ var code; if(document.all) { //是否IE浏览器
requireJS加载和bootstrap第三方组件
gfei1234的博客
08-08 1628
requirejs 基本使用： 加载require： 配置文件 模块的文件位置 require.config({ paths: { “jquery”: “./js/jquery-1.7.2”, } }); require([‘jquery’], function (KaTeX parse error: Expected '}', got 'EOF' at end of input: ) { ...
JS组件系列——Form表单验证神器： BootstrapValidator
weixin_34397291的博客
12-10 3103
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。 一、源码及API地址 介绍它之前，还是给出它的源码以及API的地址吧。 bootstrapvalidator源码：https://github.com/nghuuphuoc/...
bootstrap:bootstrapValidator校验数据是否可用（验证账户名是否重复）
最新发布
博风_刺耳的博客
12-25 610
验证账户名是否重复、是否可用。
bootstrapValidator代码中开启验证和判断验证是否通过
qq_24650793的博客
05-08 407
//开启验证 $('#saveadmin_form').data('bootstrapValidator').validate(); //是否通过校验`在这里插入代码片` if(!$('#saveadmin_form').data('bootstrapValidator').isValid()){ //没有通过校验 } else { //通过校验，可进行提交等操作 } ...
css-bootstrap表单form、模态框相关调整
陆沙的博客
08-12 415
bootstrap模态框宽度调整 input的required="required"失效 input标签必须嵌套在form标签中，required才会生效。 Bootstrap的form-control格式 要套用它的控制，不要边框： <span class="form-control" style="border-color: white; box-shadow: none;"> select的title 使用multiselect时，title生效，未选中时展示title的内容。单选sel
bootstrap输入框及验证
herenoname的博客
11-20 6393
下拉框 健康状况    -- 请选择 --    健康    良    一般    较差 数字框（电话框） 联系电话 从业年限(年)  id="congyenianxian" type="number" min=0 placeholder="请输入有效的整数值"> 以下为各种字段的验证，fields即前台
bootstrap validate校验 提示信息位置修改
qq_36134977的博客
02-21 5242
function validInfoForm(){               var e = "&lt;i class='fa fa-times-circle'&gt;&lt;/i&gt;";             return $("#form_password").validate({                 rules: {                     oldPass...
Bootstrap Validator校验使用方法和校验规则总结
csdn_yrc的博客
09-05 4106
Bootstrap Validator校验使用方法和校验规则总结 自定义校验
bootstrap modal VeeValidate
05-20
可以通过以下步骤在 Bootstrap Modal 中使用 VeeValidate 进行表单验证： 1. 首先，在您的项目中安装 VeeValidate 和 Bootstrap 依赖项： ```bash npm install vee-validate bootstrap ``` 2. 在您的 Vue 组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值