Bootstrap+PHP表单验证实例

简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证
js验证表单

1 $(document).ready(function() {
2 $('#defaultForm')
3 .bootstrapValidator({
4 message: 'This value is not valid',
5 feedbackIcons: {
6 valid: 'glyphicon glyphicon-ok',
7 invalid: 'glyphicon glyphicon-remove',
8 validating: 'glyphicon glyphicon-refresh'
9 },
10 fields: {
11 username: {
12 message: 'The username is not valid',
13 validators: {
14 notEmpty: {
15 message: 'The username is required and can\'t be empty'
16 },
17 stringLength: {
18 min: 6,
19 max: 30,
20 message: 'The username must be more than 6 and less than 30 characters long'
21 },
22 /*remote: {
23 url: 'remote.php',
24 message: 'The username is not available'
25 },*/
26 regexp: {
27 regexp: /^[a-zA-Z0-9_\.]+$/,
28 message: 'The username can only consist of alphabetical, number, dot and underscore'
29 }
30 }
31 },
32 email: {
33 validators: {
34 notEmpty: {
35 message: 'The email address is required and can\'t be empty'
36 },
37 emailAddress: {
38 message: 'The input is not a valid email address'
39 }
40 }
41 },
42 password: {
43 validators: {
44 notEmpty: {
45 message: 'The password is required and can\'t be empty'
46 }
47 }
48 }
49 }
50 })
51 .on('success.form.bv', function(e) {
52 // Prevent form submission
53 e.preventDefault();
54
55 // Get the form instance
56 var $form = $(e.target);
57
58 // Get the BootstrapValidator instance
59 var bv = $form.data('bootstrapValidator');
60
61 // Use Ajax to submit form data
62 $.post($form.attr('action'), $form.serialize(), function(result) {
63 console.log(result);
64 }, 'json');
65 });
66 });

PHP远程验证用户名
1 $userName = $_POST['username'];
2
3 echo json_encode(array(
4 'message' => sprintf('Welcome %s', $userName),
5 ));
本实例下载:https://www.sucaihuo.com/php/1814.html
Bootstrap+PHP表单验证实例的更多相关文章
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- jquery-4 完整表单验证实例
jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
- bootstrap学习起步篇:初识bootstrap之表单验证(二)
学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...
- 【前端_js】Bootstrap之表单验证
Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- vue 表单验证实例
1.注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Yii 框架表单验证---实例
随机推荐
- 也谈如何获取真实正确的 Windows 系统版本号
关于 GetVersion 系列接口 关于如何获取 Windows 系统版本号的话题,网上已经有了太多的帖子.但个人觉得总结的都不尽全面,或者没有给出比较稳定的解决方案. 众所周知,获取 Window ...
- Point : GPU编程的艺术!一切的历史!
Point: 渲染渲染,神奇的渲染!! ———————————————— 只要你走的足够远,你肯定能到达某个地方. 1"GPU编程" History ————————— //由于笔 ...
- MacBook Home End
For the Home command, press down the Fn + Left Arrow keystroke combination. For the End command, pre ...
- 高性能网络通信框架 HP-Socket v5.2.1
项目主页 : http://www.oschina.net/p/hp-socket 开发文档 : http://www.docin.com/p-2079016612.html 下载地址 : https ...
- 强大的oracle分析函数
转载:https://www.cnblogs.com/benio/archive/2011/06/01/2066106.html 学习步骤:1. 拥有Oracle EBS demo 环境 或者 PRO ...
- [转]Python 的列表解析式,集合解析式,字典解析式
Python 的列表解析式,集合解析式,字典解析式 这三种都是 python 里面的语法糖. 语法糖,Syntactic Sugar,就是为了写程序时候少出错,发明的一些简便的方法,但不影响这个语法的 ...
- 转载:深入浅出Zookeeper
ZAB协议 ZAB协议是专门为zookeeper实现分布式协调功能而设计.zookeeper主要是根据ZAB协议是实现分布式系统数据一致性. zookeeper根据ZAB协议建立了主备模型完成zook ...
- c#关于var的介绍和用法
var关键字---根据初始化语句推断变量类型 功能: var关键字指示编译器根据初始化语句右侧的表达式推断变量的类型,推断类型可以是内置类型,匿名类型,用户定义类型,.NET Framework类库中 ...
- 今日、本周、本月时间列表 python方法
def get_time(self): ''' @author : Cong @Email : 624420781@qq.com @描 述 : 生产时间列表 ''' # 生成本日时间列表 i = da ...
- ubuntu环境下安装docker遇到的坑
ubuntu安装docker的前提条件是: 1. Linux 的内核版本在 3.10 或以上: 2. linux 内核要开启 cgroup 和 namespace 功能 可以执行命令:uname –a ...