<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'emp.jsp' starting page</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("ok").onclick = function() {
//真实姓名(不能为空 ,没有其他要求)
var realnameValue = document.getElementById("realname").value;
if(ltrim(rtrim(realnameValue))==""||realnameValue==null||realnameValue==undefined) {
alert("真实姓名不能为空");
document.getElementById("realname").focus();
return false;
}
//登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):
var usernameValue = document.getElementById("username").value;
if(ltrim(rtrim(usernameValue))==""||usernameValue==null||usernameValue==undefined) {
alert("登录名不能为空");
document.getElementById("username").focus();
return false;
}
//验证长度在5-8之间,字符包括[字母 数字 中文]
var pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{5,8}$/;
var flag = pattern.test(ltrim(rtrim(usernameValue)));
if(!flag) {
alert("登录名长度在5-8之间");
document.getElementById("username").focus();
return false;
}
//不能为空,长度6-12字符或数字,不能包含中文字符
var pswValue = document.getElementById("psw").value;
if(ltrim(rtrim(pswValue))==""||pswValue==null||pswValue==undefined) {
alert("密码不能为空");
document.getElementById("psw").focus();
return false;
}
//使用文本格式定义正则表达式，字符0-128之间
var pattern = /^[0-9a-zA-Z]{6,12}$/;
//注意\d形式的的正则，如果使用文本格式不用加转义字符，如果使用构造函数定义，则需加转义字符
//var pattern = /^[\da-zA-Z]{6,12}$/;
//使用构造函数定义正则表达式，没有字符限制
//var pattern = new RegExp("^[0-9a-zA-Z]{6-12}$");
//var pattern = new RegExp("^[\\da-zA-Z]{6-12}$");
flag = pattern.test(ltrim(rtrim(pswValue)));
if(!flag) {
alert("密码长度为6-12字符或数字，不能包含中文字符");
document.getElementById("psw").focus();
return false;
}
var psw2Value = document.getElementById("psw2").value;
if(pswValue!=psw2Value) {
alert("两次密码输入不一致");
document.getElementById("psw2").focus();
return false;
}
var flag = false;
var genderElements = document.getElementsByName("gender");
for(var i = 0; i< genderElements.length; i++) {
if(genderElements[i].checked) {
flag = true;
break;
}
}
if(!flag) {
alert("您没有第三种性别可选");
return false;
}
var cardValue = document.getElementById("card").value;
if(ltrim(rtrim(cardValue))==""||cardValue==null||cardValue==undefined) {
alert("身价证不能为空");
document.getElementById("card").focus();
return false;
}
var len = cardValue.length;
if(len!=15&&len!=18) {
alert("身价证必须为15位或18位");
return false;
}
//验证15位身价证（貌似这个可以DEL);
if(len == 15) {
var pattern = /^\d{15}$/;
var flag = pattern.test(cardValue);
if(!flag) {
alert("您的15位身价证格式输入不正确");
document.getElementById("card").focus();
return false;
}
}
//验证18位身价证
if(len == 18) {
var pattern = /^\d{18}|\d{17}[X]{1}$/;
var flag = pattern.test(cardValue);
if(!flag) {
alert("您的18位身价证格式输入不正确");
document.getElementById("card").focus();
return false;
}
}
//提交表单
document.forms[0].submit();
}
}
//去掉字符串左端空格
function ltrim(str) {
while(str.charAt(0) == " ") {
str.substring(1, str.length);
}
return str;
}
//去掉字符串右端空格
function rtrim(str) {
while(str.charAt(str.length-1) == " ") {
str.substring(0, sub.length-1);
}
return str;
}
</script>
</head>
<body>
<form action="http://localhost:8888" method="post">
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname"/></td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符))</td>
<td><input type="text" id="username" name="username"/></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符)</td>
<td><input type="password" id="psw" name="psw"/></td>
</tr>
<tr>
<td>确认密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2"/></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/>男
<input type="radio" id="gender_female" value="f" name="gender"/>女
</td>
</tr>
<tr>
<td>身价证(15或18为)</td>
<td>
<input type="text" id="card"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="ok" name="ok" value="保存"/>
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
### JS提交表单及JS表单验证 在Web开发中，JavaScript经常被用来增强用户体验，其中一个重要的应用领域就是表单验证。通过JavaScript进行前端验证，可以及时反馈用户输入错误，提高交互效率。本文将详细解释如何...
"JavaScript常见问题整理.txt"、"表单验证大全.txt"、"JavaScript表单验证控制代码大全.txt"、"JavaScript验证表单函数大全.txt"这些文件将提供更具体的信息和示例代码，帮助深入理解和掌握这一主题。
1. 验证基本类型：JS提供了多种内置函数来验证基本数据类型，如`isNaN()`用于检测是否为数字，`trim()`用于去除字符串两端的空白字符。 2. 自定义验证规则：通过编写自定义函数，可以实现复杂验证，例如邮箱、电话...
在本文中，我们将深入探讨“JS表单特效”，如何利用JavaScript实现高效且兼容多浏览器的表单验证功能，以及创建引人入胜的用户界面。 一、表单特效的重要性 在网页中，表单是收集用户信息的关键元素，如注册表单、...
以上都是简单的JavaScript表单验证实例，它们可以单独使用，也可以结合到更复杂的表单验证系统中。在实际开发中，通常会使用更高级的库如jQuery或现代框架如React、Vue等，结合表单验证库（如Formik、Vuelidate等）...
JavaScript（简称JS）是网页开发中用于实现客户端交互和数据验证的重要工具。在网页表单设计中，实时动态验证能够极大地提升用户体验，因为它允许用户在输入时立即得到反馈，了解其填写的信息是否符合要求，无需等待...
通过以上方法，我们可以构建出一套完整的JavaScript表单验证系统，提供实时、友好的动态提示，提升用户在填写表单过程中的体验。在实际项目中，可以结合`register.html`文件查看具体的实现方式，而`img`目录可能包含...
- **JavaScript表单验证**：JavaScript是一种在浏览器端运行的脚本语言，用于实现交互式的网页功能，包括表单验证。通过JavaScript，开发者可以在用户输入时实时检测数据的有效性，无需等待表单提交到服务器。 - **...
使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求 (this)"> 将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。 2、空值验证 表单中任意域...
总之，JS表单验证插件通过结合JavaScript、jQuery和自定义验证规则，为用户提供了一种简便、灵活的方式来确保表单数据的准确性，降低了前端开发的工作负担。一个优秀的验证插件应该易于配置，具有良好的用户体验，...
js表单验证控制代码大全 /* 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能...
5. **使用sessionStorage或localStorage**：存储用户已提交的状态，当检测到表单已经提交过，就阻止再次提交。例如： ```javascript if (sessionStorage.getItem('formSubmitted') !== 'true') { sessionStorage....
总结来说，禁止用户在JavaScript表单中输入中文汉字可以通过监听输入事件，结合正则表达式进行判断来实现。这不仅可以提升用户体验，还能确保收集到的数据满足特定格式要求。在实际应用中，可以根据具体需求调整正则...
JavaScript可以检测视口大小，根据结果调整表单布局，如使用`window.innerWidth`和`window.innerHeight`。 7. **表单状态管理**：动态表单可能涉及到表单字段的状态管理，比如禁用、启用、高亮等。可以使用`...
- `javascript提交表单__超超聊事.files`: 可能是一份关于JavaScript表单提交技术的详细讲解资料。 7. **最佳实践** - 提供即时反馈：验证时应立即通知用户输入是否有效。 - 清晰的错误信息：明确指出错误位置和...
在本主题"js表单特效"中，我们将深入探讨如何利用JavaScript和CSS来增强表单元素的视觉效果，包括文本框、按钮和超链接的特效。 1. **文本框的特效**： - **焦点和鼠标悬停效果**：可以使用JavaScript监听`focus`...
本教程将围绕“原生js表单美化制作注册个人信息提交表单代码”这一主题，详细讲解如何利用JavaScript实现这一目标。 首先，我们需要创建HTML结构，包含必要的表单元素如input字段，用于收集用户的个人信息，例如...
`JQ` 和 `JS` 是两种常见的JavaScript库，它们在处理表单验证时各有优势。`JQ`（jQuery）简化了DOM操作，而`JS`（JavaScript）提供了更为底层的控制。本文将深入探讨如何使用jQuery（JQ）和纯JavaScript（JS）进行...
在这个“javascript实现注册表单”的项目中，我们将会探讨如何使用JavaScript来创建一个功能丰富的京东风格的注册表单，涵盖表单验证、正则表达式匹配、表单状态追踪、随机验证码生成以及密码强度检测等多个关键环节...