利用ajax，js以及正则表达式来验证表单递交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/register.css">
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
<script>
//校验用户名
function checkUserName() {
//1、获取控件username的值
var username = $("#username").val();
//2、定义正则表达式
var reg_username=/^\w{8,20}$/;
//3、判断
var flag = reg_username.test(username);
if(flag){
$("#username").css("border","");
}else{
$("#username").css("border","solid 1px red");
}
return flag;
}
//校验密码
function checkPassword() {
//1、获取password控件的输入值
var password = $("#password").val();
//2、定义正则表达式
var reg_password = /^\w{8,20}$/;
//3、判断
var flag = reg_password.test(password);
if(flag){
$("#password").css("border","solid 1px green");
}else{
$("#password").css("border","solid 2px red");
}
return flag;
}
//校验邮箱
function checkEmail() {
//1、获取email中的值
var email = $("#email").val();
//2、定义正则表达式
var reg_email = /^\w+@\w+\.\w+$/;
//3、判断
var flag = reg_email.test(email);
if(flag){
$("#email").css("border","solid 1px green");
}else{
$("#email").css("border","solid 2px red");
}
return flag;
}
//校验姓名
function checkname() {
//1、获取name的值
var name = $("#name").val();
//2、定义正则表达式
var reg_name = /^\w{3,20}$/;
var flag = reg_name.test(name);
//3、判断
if(flag){
$("#name_msg").css("border","solid 1px green");
}else{
$("#name_msg").css("border","solid 1px red");
}
return flag;
}
function checktelephone() {
//1、获取telephone的值
var telephone = $("#telephone").val();
//2、定义正则表达式
var reg_telphone =/^1[34589][0-9]{9}$/;
//3、判断
var flag = reg_telphone.test(telephone);
if(flag){
$("#telephone").css("border","solid 1px green");
}else{
$("#telephone").css("border","solid 1px red");
}
return flag;
}
$(function () {
//当表单提交的时候，调用所有的验证方法
$("#registerForm").submit(function () {
//发送数据到服务器
if(checkUserName() && checkPassword() && checkEmail() && checkname() && checktelephone()){
$.post("registUserServlet",$(this).serialize(),function(data){
});
}
return false;
});
//失去焦点时，调用方法
$("#username").blur(checkUserName);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkname);
$("#telephone").blur(checktelephone);
});
</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
<div class="rg_form clearfix">
<div class="rg_form_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_form_center">
<!--注册表单-->
<form id="registerForm" action="user">
<!--提交处理请求的标识符-->
<input type="hidden" name="action" value="register">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名</label>
</td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="请输入账号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="text" id="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="请输入Email">
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手机号</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性别</label>
</td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
</td>
</tr>
<tr>
<td class="td_left">
<label for="check">验证码</label>
</td>
<td class="td_right check">
<input type="text" id="check" name="check" class="check">
<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)" >
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) { img.
src="checkCode?"+new Date().getTime();
}
</script>
</td>
</tr>
<tr>
<td class="td_left">
</td>
<td class="td_right check">
<input type="submit" class="submit" value="注册">
<span id="msg" style="color: red;"></span>
</td>
</tr>
</table>
</form>
</div>
<div class="rg_form_right">
<p>
已有账号？
<a href="#">立即登录</a>
</p>
</div>
</div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
利用ajax，js以及正则表达式来验证表单递交的更多相关文章
- H5利用pattern属性和oninvalid属性验证表单
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- JS高级---案例：验证表单
案例:验证表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）
js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...
随机推荐
- python grpc 微服务
https://realpython.com/python-microservices-grpc/ https://www.manning.com/books/developing-microserv ...
- RabbitMQ保证消息的顺序性
当我们的系统中引入了MQ之后,不得不考虑的一个问题是如何保证消息的顺序性,这是一个至关重要的事情,如果顺序错乱了,就会导致数据的不一致. 比如:业务场景是这样的:我们需要根据mysql的b ...
- 深入理解Spring IOC源码分析
Spring容器初始化 本文使用的是Spring 5.1.7版本 写在前面:我们看源码一般有3种方式. 第一种直接用class文件,IDEA会帮我们反编译成看得懂的java代码 第二种是用maven的 ...
- python实现调用摄像头或打开视频文件
目录: (一)调用摄像头或打开视频文件代码实现 (二)说明和补充 (一)调用摄像头或打开视频文件代码实现 1 # -*- coding=GBK -*- 2 import cv2 as cv 3 4 5 ...
- 和安卓对接老是ping不通？试试内网映射
https://ngrok.cc/download.html
- uni-app开发 uni.scss 样式的整体化设置
今天在写uni-app设计的时候,界面图片.图标规格一直无法正常显示.查看了uni-app官网的代码注释后,发现了在style中设置<style lang="scss"> ...
- 关于"丢失的牛"这个题的教学反思
某天上课讲到这样一个题:丢失的牛1~n,乱序排列,告诉从第二个位置到最后一个位置, 每个位置的前面的数字中比它小的数的个数,求每个位置的数字是多少N<=8000 FormatInput第一行给出 ...
- Redis线程模型的前世今生
一.概述 众所周知,Redis是一个高性能的数据存储框架,在高并发的系统设计中,Redis也是一个比较关键的组件,是我们提升系统性能的一大利器.深入去理解Redis高性能的原理显得越发重要,当然Red ...
- C++ 编译错误记录
C++ _ZSt28__throw_bad_array_new_lengthv1 编译错误 出现场景:类似代码 vector<vector<int>> grid = {{1, ...
- FJD1T1
在考场上因为一些原因,系统编译不了. 于是在最后\(1h\)把\(T3\)得重打一遍,所以这题的暴力没有写完. 不过也确实很蠢,没想到做法. 考虑搜索原串中的字母的对应取值,然后计算出结果的柿子. 考 ...