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

原文地址:https://www.cnblogs.com/mrlime/p/10485233.html

时间: 2024-08-14 03:48:58

Bootstrap+PHP表单验证实例的相关文章

基于angular的表单验证实例

最近,在学习angular下面就和大家分享一个简单的表单验证实例 在分享实例之前先整理一下,一些基础知识 input元素上使用的所有验证选项: 1必填项  <input type="text"  required/> 2最小长度 <input type="text" ng-minlength="5"/> 3最大长度 <input type="text" ng-maxlength="20&

正则表达式表单验证实例代码详解

正则表达式表单验证实例代码详解 这篇文章主要介绍了正则表达式表单验证实例详解的相关资料,大家可以参考下.正则表达式表单验证具体内容如下: 首先给大家解释一些符号相关的意义 * 匹配前面的子表达式零次或多次: ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 1. /^$/ 这个是个通用的格式. 2. 里面输入需要实现的功能. \d 匹配一个数字字符,等价于[0-9] + 匹配前面的子表达式一次或多次: ?匹配前面的子表达式零次或一次: 下面通过一段代码给大家分析表单验证正则表达式,具体代

jquery 一个简单的表单验证实例

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

HTML5 web Form表单验证实例

HTML5 web Form 的开发实例! index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5表单验证</title> 6 <link rel="stylesheet" type="text/css" href="../css/style.

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

学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验证规则.使用jquery验证,能让我们省去一些功夫. 首先我们需要引入js文件:jquery.validate.js:另外为了能使用它的样式,我们需另外引入screen.css.当然,如果要使用bootstrap,还是要引入其所需的文件的. 下面,我们需要一个表单: <form class="

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

前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的

HTML5的表单验证实例

HTML5新增加的表单验证可以大大减少你对JavaScript代码的依赖,并且进行丰富的客户端校验,下面提供两个例子. 1.HTML5客户端校验:checkValidity方法 checkValidity方法可以用于检验你的输入是否合法,合法时返回true,否则返回false. <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5客户端校验:chec

JavaScript - 表单验证实例

表单验证1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . pickadate.  Echarts.chosen.(编辑器插件) ckeditor在百度上都可以直接搜索 表单校验 jQuery插件validation:https://jqueryvalidation.org/ validation是一个基于jQuery的插件,里面有了jQuery的一些函数