Bootstrap之form表单验证

最新推荐文章于 2023-11-27 20:21:12 发布
最新推荐文章于 2023-11-27 20:21:12 发布
阅读量1.6k 收藏 1
点赞数

bootstrap-3.3.7-dist
bootstrapvalidator-master 从这两个文件中引入js组件
html代码

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="./bootstrapvalidator-master/dist/css/bootstrapValidator.min.css">
	<script type="text/javascript" src = "./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>
</head>

<div class="container">
		<form class="form-horizontal" name="form1" action='reg1.php' method="post">

		  <div class="form-group">
		    <label for="user" class="col-sm-2 control-label">用户名：</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
		    </div>
		  </div>

  		  <div class="form-group">
		    <label for="age" class="col-sm-2 control-label">年龄：</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
		    </div>
		  </div>

		  <div class="form-group">
		    <label for="pwd" class="col-sm-2 control-label">Password:</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
		    </div>
		  </div>

		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
		    </div>
		  </div>
		</form>
</div>

//js样式
notEmpty：非空验证；
numeric：数值验证；
stringLength：字符串长度；
regexp：正则表达式验证

$(function () {
        $('form').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
            　feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },
            fields: {
            //user名称必须与name名称相同（区分大小写）
                user: {
                    message: '请输入用户名',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        },
                    }
                },
                pwd: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                age:{
                	validators:{
                		notEmpty: {
                            message: '年龄不能为空'
                        },
                		numeric:{
                			message:'必须是数值'
                		}
                	}
                }
            }
        });
    });
xing_xing_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 表单验证formValidation 实现远程验证功能
08-30
主要介绍了Bootstrap 表单验证formValidation 实现远程验证功能,需要的朋友可以参考下
Form表单验证
weixin_30664539的博客
08-23 5439
Form表单提交前js验证 1. Onclick() 2. Onsubmit() Button标签input (属性submit button )标签 Input type=button 定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本 Input type=submit定义提交按钮，提交按钮会把表单数据发送到服务器 1. oncli...
form表单的多种提交方式及提交前验证
热门推荐
qq_42128262的博客
06-21 2万+
以下是本人总结处来的一些form的提交方式，网上还有别的提交方式，这里我总结了大小分为7类，其实就是三类的提交方式，若有哪里不对的，还请评论指出来，大家一起学习学习 1、无任何验证提交（最普通的提交） 该方式不提供任何的验证方式，当我们点击提交时（提交的前提一定是 <input> 的type="submit"或者加粗样式<button>的type=“submit”） for...
bootstrap的表单验证 vue_Bootstrap 表单验证formValidation 的实例详解
weixin_36285826的博客
12-24 1631
这篇文章主要介绍了Bootstrap 表单验证formValidation 实现表单动态验证功能,需要的朋友可以参考下Bootstrap教程动态添加input并动态添加新验证方式！init状态：点击“+”后：验证后：知识点：1 先去官网下载：formvalidation.io/2 导入文件，注意事项我就不多说了在远程验证那篇我已经讲过。3 用到的关键字：addField、removeField、d...
bootstrap表单验证 FormValidation API
久如云漂泊
05-17 3317
官网http://formvalidation.io/api/用法 使用插件初始化表单后$(form).formValidation(options)，有两种方法调用插件方法：// Get plugin instance var formValidation = $(form).data('formValidation');// and then call method formValidatio
Bootstrap 表单验证formValidation 实现表单动态验证功能
12-11
动态添加input并动态添加新验证方式！ init状态：   点击“+”后：   验证后： 知识点： 1 先去官网下载：http://formvalidation.io/ 2 导入文件，注意事项我就不多说了在远程验证那篇我已经讲过。 3 用到的关键字：addField、removeField、different 4注意一点就是官网里的例子他们的name是不一样的。我这里比较偷懒。且项目ajax的时候不是用的form表单提交，而是自己并接成json提交，所以x，y的name的名字一样。 好开始： 首先是在html里面必须要有一个 “+” 标记为addPos，然后有一个“-” 标记为“remov
JS组件系列——Form表单验证神器： BootstrapValidator
weixin_34397291的博客
12-10 3069
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。 一、源码及API地址 介绍它之前，还是给出它的源码以及API的地址吧。 bootstrapvalidator源码：https://github.com/nghuuphuoc/...
bootstrap表单验证
xcc_2269861428的博客
01-13 793
pageEncoding="UTF-8"%> 表单测试       用户姓名:       生　　日: 邮　　件: 密　　码: 确认密码:
bootstrapValidator Form表单校验
zs的博客
11-12 5325
Form 表单校验（bootstrapValidator） 引用 js 文件（必须） &lt;script type="text/javascript" src="/statics/js/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/statics/js/bootstrapValidato.
JS组件Form表单验证神器BootstrapValidator
10-22
做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。今天就来看看bootstrapvalidator如何使用，感兴趣的小伙伴们可以参考一下
BootStrap表单验证实例代码
11-27
下面给大家分享bootstrap表单验证实例代码，具体代码如下所示： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../include/taglib....
Bootstrap学习总结笔记（24）-- 基于BootstrapValidator的Form表单验证
kikaylee的专栏
12-11 5817
Form表单进行数据验证是十分必要的，我们可以自己写JS脚本或者使用jQuery Validate 插件来实现。对于Bootstrap而言，利用BootstrapValidator来做Form表单验证是个相当不错的选择，两者完全兼容，我们也不用去关注CSS样式等美工效果。
表单验证bootstrap数据验证插件bootstrapValidator
qq_40281275的博客
11-12 806
基于jquery，bootstrap数据验证插件bootstrapValidator 教程 bootstrap：能够增加兼容性的强大框架. 因为项目需要数据验证，看bootstrapValidator 还不错，就上手一直，完美兼容，话不多说。 需要引用css： bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2...
form表单校验
m0_65132206的博客
05-19 7563
表单校验的基本步骤--简单校验,可以在基础上添加if判断校验成功跳转路由......
bootstrap 5 表单验证
weixin_43727933的博客
07-25 3969
zpjbvalidator改编自jbvalidator是一个全新的基于jQuery的表单验证插件，它是为最新的Bootstrap5框架创建的，理论上支持Bootstrap3，Bootstrap4支持客户端和服务器端验证。在原有功能基础上，修改了其核心代码。为了区别与源代码，将文件名更改为zpjbvalidator.js。.........
Form 表单验证详细版
m0_73763853的博客
11-27 406
autorules。
华为OD机试D卷 - 在字符串中找出连续最长的数字串(含“+-”号) - 免费看解析和代码.html
最新发布
05-10
私信博主免费获取真题解析以及代码
bootstrap 表单验证
08-16
要使用 Bootstrap 表单验证，需要在表单元素上添加一些特定的类和属性。 首先，在 form 标签添加 `needs-validation` 类，表示该表单需要进行验证。然后，在需要验证的表单元素上添加 `required` 属性，表示该字段...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值