简单实用的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表单验证实例的更多相关文章

  1. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  2. jquery-4 完整表单验证实例

    jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...

  3. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. bootstrap学习起步篇:初识bootstrap之表单验证(二)

    学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...

  5. 【前端_js】Bootstrap之表单验证

    Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程    

  6. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...

  7. jQuery常用插件与jQuery使用validation插件实现表单验证实例

    jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...

  8. vue 表单验证实例

    1.注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. Yii 框架表单验证---实例

随机推荐

  1. 也谈如何获取真实正确的 Windows 系统版本号

    关于 GetVersion 系列接口 关于如何获取 Windows 系统版本号的话题,网上已经有了太多的帖子.但个人觉得总结的都不尽全面,或者没有给出比较稳定的解决方案. 众所周知,获取 Window ...

  2. Point : GPU编程的艺术!一切的历史!

    Point: 渲染渲染,神奇的渲染!! ———————————————— 只要你走的足够远,你肯定能到达某个地方. 1"GPU编程" History ————————— //由于笔 ...

  3. MacBook Home End

    For the Home command, press down the Fn + Left Arrow keystroke combination. For the End command, pre ...

  4. 高性能网络通信框架 HP-Socket v5.2.1

    项目主页 : http://www.oschina.net/p/hp-socket 开发文档 : http://www.docin.com/p-2079016612.html 下载地址 : https ...

  5. 强大的oracle分析函数

    转载:https://www.cnblogs.com/benio/archive/2011/06/01/2066106.html 学习步骤:1. 拥有Oracle EBS demo 环境 或者 PRO ...

  6. [转]Python 的列表解析式,集合解析式,字典解析式

    Python 的列表解析式,集合解析式,字典解析式 这三种都是 python 里面的语法糖. 语法糖,Syntactic Sugar,就是为了写程序时候少出错,发明的一些简便的方法,但不影响这个语法的 ...

  7. 转载:深入浅出Zookeeper

    ZAB协议 ZAB协议是专门为zookeeper实现分布式协调功能而设计.zookeeper主要是根据ZAB协议是实现分布式系统数据一致性. zookeeper根据ZAB协议建立了主备模型完成zook ...

  8. c#关于var的介绍和用法

    var关键字---根据初始化语句推断变量类型 功能: var关键字指示编译器根据初始化语句右侧的表达式推断变量的类型,推断类型可以是内置类型,匿名类型,用户定义类型,.NET Framework类库中 ...

  9. 今日、本周、本月时间列表 python方法

    def get_time(self): ''' @author : Cong @Email : 624420781@qq.com @描 述 : 生产时间列表 ''' # 生成本日时间列表 i = da ...

  10. ubuntu环境下安装docker遇到的坑

    ubuntu安装docker的前提条件是: 1. Linux 的内核版本在 3.10 或以上: 2. linux 内核要开启 cgroup 和 namespace 功能 可以执行命令:uname –a ...