利用ajax,js以及正则表达式来验证表单递交
2024-10-19 17:51:01
<!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>
最新文章
- pt-pmp
- 看看你的正则行不行——正则优化一般的json字符串
- MongoDB 用户配置
- Silverlight 限制 规则输入(正整数或小数)的另一种“技巧”写法
- express创建项目
- Android应用程序绑定服务(bindService)的过程源代码分析
- robotframework代码定位感悟
- (概念)多个CPU和多核CPU以及超线程(Hyper-Threading)
- Identity Server 4 中文文档(v1.0.0)
- 菜鸟python之路-第五章(记录读书点滴)
- Tensoflow API笔记(N) 设备指定
- Robust Influence Maximization
- FineUI开源版(ASP.Net)开发实践-目录
- CentOS下防御或减轻DDoS攻击方法(转)
- Permission denied (publickey),Gitlab &; Github 多ssh key 冲突 导致的权限问题
- 微信 js api[转]
- MySQL的DDL语句、DML语句与DCL语句
- linux命令中的head命令
- Spring Cloud常用组件介绍
- R语言学习——R读取txt、csv、xls和xlsx格式文件