JS&Jquery&正则表达式 判断多种文本框内容是否合法
·
<%--
Created by IntelliJ IDEA.
User: d2072
Date: 2021/5/7
Time: 14:34
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>添加用户</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<%--// 总：当提交按钮被单击时，进行判断是否有文本框是空的，有空的那么alert请填写完整内容--%>
<body>
<div class="container">
<center><h3>添加联系人页面</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名" onblur="checkName(this)">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄" onblur="checkAge(this)">
</div>
<div class="form-group">
<%--@declare id="address"--%>
<label for="address">籍贯：</label>
<select name="address" class="form-control" id="jiguan">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
</div>
<div class="form-group">
<%--@declare id="qq"--%>
<label for="qq">QQ：</label>
<input id="qq" type="text" class="form-control" name="qq" placeholder="请输入QQ号码" onblur="checkQq()"/>
</div>
<div class="form-group">
<%--@declare id="email"--%>
<label for="email">Email：</label>
<input id="email" type="text" class="form-control" name="email" placeholder="请输入邮箱地址" onblur="checkEmail()"/>
</div>
<div class="form-group" style="text-align: center">
<input id = "submit" class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" />
</div>
</form>
</div>
<script>
/*function isChinese() {
var ret = false;
var s = document.getElementById("name").value;
for (var i = 0; i < s.length; i++)
ret = (s.charCodeAt(i) >= 10000) || ret;
if (ret) {
} else {
alert("没有汉字");
}
}*/
/*进行判断，如果姓名文本框输入了数字那么就alert个错误提示框并且清空文本框内容*/
//2.当鼠标失去焦点时进行判断
var reg_name = /^[a-zA-Z\u4e00-\u9fa5]{1,20}$/;
function checkName() {
//1.获取文本框的内容
var name_text = $("#name").val();//文本框的内容
if (reg_name.test(name_text) === false) {
alert("用户名无效!请重复输入!");
document.getElementById("name").value="";
}
}
/*进行判断，如果年龄文本框输入了非数字那么就alert个错误提示框并且清空文本框内容*/
var reg_age = /^\d{1,3}$/;
//2.当鼠标失去焦点时进行判断
function checkAge() {
//1.获取文本框的内容
var age_text = $("#age").val();//文本框的内容
if (reg_age.test(age_text) === false || age_text < 0 || age_text > 150) {
alert("年龄无效!请重复输入!");
document.getElementById("age").value = "";
}
}
/*进行判断，如果qq文本框输入了非数字那么就alert个错误提示框并且清空文本框内容*/
var reg_qq = /^\d{5,15}$/;
//2.当鼠标失去焦点时进行判断
function checkQq() {
//1.获取文本框的内容
var qq_text = $("#qq").val();//文本框的内容
if (reg_qq.test(qq_text) === false) {
alert("qq无效!请重复输入!");
document.getElementById("qq").value = "";
}
}
/*进行判断，如果email文本框输入了特殊字符那么就alert个错误提示框并且清空文本框内容*/
var reg_email = /^[a-zA-Z0-9@.]{1,20}$/;
//2.当鼠标失去焦点时进行判断
function checkEmail() {
//1.获取文本框的内容
var email_text = $("#email").val();//文本框的内容
if (reg_email.test(email_text) === false) {
alert("邮箱无效!请重复输入!");
document.getElementById("email").value = "";
}
}
</script>
</body>
</html>
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)