jquery验证前端页面
一共三个页面
- jquery.html文件(前端页面,jquery验证用户信息)
- jquerytest.php文件(后台处理页面)
- jquerydb.php文件(数据库)
数据表结构
jquery.html
jquery需要表单<form>把form里的值传到php文件;而ajax可以不用表单元素,可以通过url:"***.php“ type="post"传值 |
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta charset="UTF-8" />
<!-- 引用的jquery文件 在谷歌浏览器中可以执行的jqery文件 ;这个可以直接使用,不用下载-->
<script src="https://weui.io/zepto.min.js"></script> <!-- 引用的jquery文件 在ie浏览器中可以执行的jqery文件,我是下载到本地的-->
<script src="jquery.min.js"></script>
<!--
jquery验证
-->
<script type="text/javascript">
$(function() {
$('#form1').submit(function() { //当提交表单时,会发生 submit 事件。该事件只适用于表单元素。submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
var username = $("#username").val(); //获取input的内容
var pass1 = $("#pass1").val();
var pass2 = $("#pass2").val();
if (username == "" || pass1 == "" || pass2 == "") {
alert("请填写完整");
return false;
}
if (pass1 != pass2) {
alert("两次密码不一致");
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" action="jquerytest.php" method="post">
<div>
<div>
<div>
<label>用户名</label>
</div>
<div>
<input id="username" type="text" placeholder="请输入用户名号" name="username">
</div>
</div>
<div>
<div>
<label>密码</label>
</div>
<div>
<input type="password" id="pass1" value="" name="pass1">
</div>
</div>
<div>
<div>
<label>确认密码</label>
</div>
<div>
<input type="password" value="" id="pass2" placeholder="" name="pass2">
</div>
</div>
</div>
<div>
<input type="submit" name="sub" id="sub" value="注册" />
</div>
</form>
</body>
</html>
2 jquerytest.php
<?php
require ("jquerydb.php");//引入数据库处理文件
$db = new Mysql("localhost", "root", "", "userdb");
if (isset($_POST["sub"])) { //获取表单数据
$username = $_POST["username"];
$pass1 = $_POST["pass1"];
$pass2 = $_POST["pass2"];
define("TABLENAME", "user_zhuce");
define("SEL", "where username='$username'");
define("COLE", "(username,password,password2)");
define("DATEE", "('$username','$pass1','$pass2')");
//信息是否为空
$db -> isnull($username, $pass1, $pass2);
//密码是否一致
$db -> issame($pass1, $pass2);
if ($pass1 == $pass2) {
//查询是否有相同的用户名
$sel = $db -> select(TABLENAME, SEL);
//查询有该用户名的数目
$row = $db -> row($sel);
$r = $row[];
if ($r == ) {
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "该用户名已被注册" . "\"" . ")" . ";" . "</script>"; exit ;
} //插入用户信息
$insert = $db -> insert(TABLENAME, COLE, DATEE);
$sel = $db -> select(TABLENAME, SEL);
$row = $db -> row($sel);
$r = $row[];
if ($r == ) {
echo "注册成功";
} $db -> dbClose(); }
}
?>
3jquerydb.php
<?php
header("content-type:text/html;charset=utf-8");
class Mysql {
private $host;
//服务器地址
private $root;
//用户名
private $password;
//密码
private $database;
//数据库名 //通过构造函数初始化类
function Mysql($host, $root, $password, $database) {
$this -> host = $host;
$this -> root = $root;
$this -> password = $password;
$this -> database = $database;
$this -> connect();
}
//连接数据库函数
function connect() {
$this -> conn = mysql_connect($this -> host, $this -> root, $this -> password);
mysql_select_db($this -> database, $this -> conn);
mysql_query("set names utf8");
}
//关闭数据库
function dbClose() {
mysql_close($this -> conn);
}
//mysql_query函数
function query($sql) {
return mysql_query($sql);
} function row($result) {
return mysql_fetch_row($result); }
//数目
function select($tableName, $condition) {
return $this -> query("SELECT COUNT(*) FROM $tableName $condition");
}
//选择语句
function insert($tableName, $fields, $value) {
$this -> query("INSERT INTO $tableName $fields VALUES$value");
}
//判断用户名,密码,确认密码是否为空
function isnull($input1,$input2,$input3){
if($input1==""||$input2==""||$input3==""){
echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."请填写完整(php)!"."\"".")".";"."</script>"; }
}
//判断两次的密码是否一致
function issame($password1,$password2){
if($password1!=$password2){
echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."两次密码不一致!(php)"."\"".")".";"."</script>"; }
} } ?>
jquery验证前端页面的更多相关文章
- ajax验证前端页面
1.html页面 用ajax验证表单的时候不需要form标签,并把提交按钮由type=“submit ”改为type=“button” 数据表结构 ajax.html <!DOCTYPE htm ...
- javascript验证前端页面
数据表结构 1.html页面 <!DOCTYPE html> <html> <head> <title>注册</title> <met ...
- 使用 jQuery 进行前端验证
前段验证脚本的教程,其基础为jQuery的插件validate. 一.可以验证哪些信息 要求输入不能为空 要求输入格式必须为电子邮箱 要求输入格式必须为URL 要求输入格式必须为日期 要求输入格 ...
- 前端页面表格排序 jQuery Table 基础
通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进 ...
- 由前端登录验证,页面跳转,携带headers token引发的思考和尝试
目录 1 前言 2 我的实现方式与存在的问题 3 我想到的解决方案 3.1 前端跳转时携带headers{'token': token} 不就行了(经验证不可行) 3.2 前端跳转封装请求,携带hea ...
- [前端] jquery验证手机号、身份证号、中文名称
验证: 中文姓名.手机号.身份证和地址 HTML(表单): <form action=""> <div class="form-group"& ...
- Python之路-(js正则表达式、前端页面的模板套用、Django基础)
js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...
- servlet自动获取前端页面提交数据
servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...
- Django实战(一)-----用户登录与注册系统3(前端页面、登录视图)
基本框架搭建好了后,我们就要开始丰富页面内容了.最起码,得有一个用户登录的表单不是么?(注册的事情我们先放一边.) 一. 原生HTML页面 删除原来的login.html文件中的内容,写入下面的代码: ...
随机推荐
- python-10多进程
1-多进程(multiprocessing), 1个父进程可以有多少子进程 1.1下面的例子演示了启动一个子进程并等待其结束 from multiprocessing import Process i ...
- dfs序线段树
dfs序+线段树,啥?如果在一棵树上,需要你修改一些节点和查询一些节点,如果直接dfs搜的话肯定超时,那用线段树?树结构不是区间啊,怎么用?用dfs序将树结构转化为一个区间,就能用线段树进行维护了. ...
- 关于修改zeppelin的代码显示
最近我在修改zeppelin(0.7版本)的源码相关的知识,目前做的工作是修改zeppelin的代码,为了让zeppelin可以可以在页面中显示数据集,并且在其数据库中存储式真实的路径1.如果我们要运 ...
- 6 Django的视图层
视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . ...
- 3,Linux入门
操作系统的分类 Windows系列操作系统,Unix类操作系统,Linux类操作系统,Mac操作系统 提问:为什么要去学习Linux? 同学甲可能要问,超哥你介绍了这么多有关Linux的知识,但我还是 ...
- Eclipse 创建 Java 类---Eclipse教程第10课
打开新建 Java 类向导 你可以使用新建 Java 类向导来创建 Java 类,可以通过以下途径打开 Java 类向导: 点击 "File" 菜单并选择 New > Cla ...
- myeclipse用maven搭建web项目后tomcat启动报找不到jar包解决办法
因为maven项目jar包放在Maven Dependencies内,用tomcat启动web项目,会找WEB-INF下的lib目录,需要部署Maven Dependencies 选中项目-prope ...
- static任我行- 为人不注意的static
前几天一直在想,static方法如果没有被调用,会不会分配内存的问题,查了一下资料,终于得到了一个官方的说法了. static 方法调用:使用比较频繁的时候使用,像数据库连接串,Connection ...
- 剑指Offer - 九度1372 - 最大子向量和(连续子数组的最大和)
剑指Offer - 九度1372 - 最大子向量和(连续子数组的最大和)2013-11-23 16:25 题目描述: HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天JOBDU测试组开完会后, ...
- 《Cracking the Coding Interview》——第14章:Java——题目5
2014-04-26 19:06 题目:Java中的对象反射机制是什么?有鼠么用? 解法:完全不了解,因为java编程经验太少,完全没用过.查了一些资料后,感觉反射机制是个强大并需要边用边体会的强大工 ...