JavaScript 最常见的用法之一就是验证表单
对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法
<html>
<head>
<title>表单验证</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB18030">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body,td{
font-family: 宋体;
font-size: 12px;
padding-left: 5px;
}
td div{
color: red;
font-size: 12px;
}
.inputtext{
width: 140px;
height: 20px;
border-style: solid;
border-color: gray;
border-width: 1px;
}
</style>
<script type="text/javascript">
window.onload = function(){
//用户名：
document.eventForm.username.onblur = function(){
var username = document.eventForm.username.value;
if(username==""){
document.getElementById("username_error").innerHTML = "用户名不能为空";
}else{
document.getElementById("username_error").innerHTML= "";
}
}
document.eventForm.username.onfocus = function(){
document.getElementById("username_error").innerHTML = "请输入用户名，如：finally123_m";
}
//密码
document.eventForm.password.onblur = function(){
var password = document.eventForm.password.value;
if(password==""){
document.getElementById("password_error").innerHTML = "密码不能为空";
else if(password.length<6){
document.getElementById("password_error").innerHTML = "密码必须是6位字符以上";
}else{
document.getElementById("password_error").innerHTML= "";
}
}
document.eventForm.password.onfocus = function(){
document.getElementById("password_error").innerHTML = "请输入密码，如：123abc";
}
//重复密码
document.eventForm.password2.onblur = function(){
var password = document.eventForm.password.value;
var password2 = document.eventForm.password2.value;
if(password != password2){
document.getElementById("password2_error").innerHTML = "密码不一致";
}else{
document.getElementById("password2_error").innerHTML= "";
}
}
document.eventForm.password2.onfocus = function(){
document.getElementById("password2_error").innerHTML = "请再次输入密码";
}
//籍贯
document.eventForm.province.onchange = function(){
var province = document.eventForm.province.value;
if(province=="0"){
document.getElementById("province_error").innerHTML = "请选择你的籍贯";
}else{
document.getElementById("province_error").innerHTML= "";
}
}
//简介：当文本域获取焦点时，清空默认值
document.eventForm.desc.onfocus = function(){
document.eventForm.desc.innerHTML = "";
}
}
//提交事件表单验证
function func_onsubmit(){
var username = document.eventForm.username.value;
if(username==""){
document.getElementById("username_error").innerHTML = "用户名不能为空";
return false;
}
var password = document.eventForm.password.value;
if(password==""){
document.getElementById("password_error").innerHTML = "密码不能为空";
return false;
}
var password2 = document.eventForm.password2.value;
if(password2!=password){
document.getElementById("password2_error").innerHTML = "密码不一致";
return false;
}
//获取单选按钮被选中的值（性别）
var sex = document.eventForm.sex;
//alert(sex.length);
for(var i=0;i<sex.length;i++){
if(sex[i].checked){
sex = sex[i].value;
break;
}
}
//获取下拉列表框被被中的值
var province = document.eventForm.province.value;
if(province=="0"){
document.getElementById("province_error").innerHTML = "请选择你的籍贯";
return false;
}
//获取复选框被选中的值
var likes = document.eventForm.likes;
var _likes = "";
for(var i=0;i<likes.length;i++){
if(likes[i].checked){
_likes = _likes + likes[i].value + ",";
}
}
//获取文本域的值
var desc = document.eventForm.desc.value;
alert("用户名是："+username+"\n密码是："+password+"\n性别是："+sex+"\n籍贯是："+province + "\n爱好是："+_likes+"\n自我简介："+desc)
return true;
}
</script>
</head>
<body>
<form action="" name="eventForm" onsubmit="return func_onsubmit()">
<table align="center" width="600" bgcolor="gray" cellpadding="0" cellspacing="1" border="0">
<tr bgcolor="white">
<th colspan="3" height="60" align="center" valign="middle">用户注册</th>
</tr>
<tr bgcolor="white">
<td width="80">*用户名</td>
<td width="160"><input class="inputtext" type="text" name="username"></td>
<td width="360"><div id="username_error"><div></td>
</tr>
<tr bgcolor="white">
<td>*密码</td>
<td><input class="inputtext" type="password" name="password"></td>
<td><div id="password_error"><div></td>
</tr>
<tr bgcolor="white">
<td>*重复密码</td>
<td><input class="inputtext" type="password" name="password2"></td>
<td><div id="password2_error"><div></td>
</tr>
<tr bgcolor="white">
<td>*性别</td>
<td>
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</td>
<td><div id="sex_error"><div></td>
</tr>
<tr bgcolor="white">
<td>*籍贯</td>
<td>
<select name="province" class="inputtext">
<option value="0">请选择...</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="天津市">天津市</option>
<option value="重庆市">重庆市</option>
</select>
</td>
<td><div id="province_error"><div></td>
</tr>
<tr bgcolor="white">
<td>爱好</td>
<td>
<input type="checkbox" name="likes" value="运动">运动
<input type="checkbox" name="likes" value="上网">上网<br>
<input type="checkbox" name="likes" value="玩游戏">玩游戏
<input type="checkbox" name="likes" value="阅读">阅读
</td>
<td><div id="likes_error"><div></td>
</tr>
<tr bgcolor="white">
<td>自我简介</td>
<td colspan="2">
<textarea class="inputtext" style="width:auto;height:auto" rows="10" cols="60" name="desc">请输入你的个人信息介绍...</textarea>
</td>
</tr>
<tr bgcolor="white">
<td colspan="3" align="center">
<input type="submit" value="注册" >
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
本文将深入探讨"javascript表单验证方式一"，介绍如何利用JavaScript进行表单验证，确保用户输入的数据符合预设规则，提高用户体验，同时也减轻了服务器端的压力。 首先，表单验证的基本目标是检查用户在HTML表单中...
总的来说，"javascript表单验证器三方库.zip" 提供了一个强大的工具，用于处理JavaScript表单验证，它具有可配置性、递归数据验证等特性，是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...
这个"JavaScript表单验证模板"是一个实用的工具，适合初学者学习和快速实现表单数据验证功能。表单验证是确保用户输入符合特定规则的关键步骤，它可以防止无效数据提交到服务器，提高用户体验，并减少服务器端处理...
首先，JavaScript表单验证的基本步骤包括： 1. **获取表单元素**：通过`document.getElementById`或`document.querySelector`等方法获取表单元素，例如`<input>`、`<select>`和`<textarea>`等。 2. **添加事件监听...
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
"强大JavaScript表单验证"这个主题旨在教你如何有效地利用JavaScript来确保用户提交的数据符合预期的格式和规则，从而提高网站的安全性和用户体验。 1. **表单验证的重要性**：在网页上，表单用于收集用户的个人...
"JavaScript表单验证大全"这个主题涵盖了许多关于如何使用JavaScript有效地验证用户输入的重要概念。表单验证是确保用户提交的数据符合预设规则的关键步骤，它能防止无效数据进入数据库，提升用户体验，并减少服务器...
以下是对给定文件中涉及的一些JavaScript表单验证技术的详细解释： 1. 长度限制：通过检查`value.length`属性来限制文本框的字符数。例如，`if(document.a.b.value.length>50)`检查输入的长度是否超过50个字符，...
"JavaScript表单验证控制代码大全"是一个集成了多种表单验证技术和策略的资源集合，帮助开发者有效地确保用户输入的数据质量和安全性。下面我们将深入探讨这个主题，了解JavaScript如何对表单数据进行验证以及常见的...
### JavaScript表单验证知识点详解 #### 一、前言 在Web开发中，表单验证是确保用户输入数据准确性和安全性的关键步骤。通过前端JavaScript进行初步的数据验证，可以极大地提高用户体验并减轻后端服务器的压力。本...
JavaScript表单验证类是Web开发中的重要组成部分，主要用于在用户提交数据前检查输入的有效性和完整性。这个类通常包含了各种验证规则，如非空检查、邮箱格式验证、手机号码验证等，确保用户输入的数据符合预设的...
通过本文的介绍，你应该能够理解并实现基本的JavaScript表单验证。记住，验证是提高应用质量和用户体验的重要步骤。始终确保你的验证逻辑既严格又用户友好。 通过不断的实践和学习，你可以掌握更复杂的验证技巧，...
通过以上分析，我们可以看到JavaScript在前端表单验证中的重要作用。合理利用JavaScript可以显著提升用户体验，并确保数据的有效性和安全性。同时，随着技术的发展，开发者们也在不断探索更高效、更安全的验证策略。
标题：“Javascript表单验证大全” 描述详解：这篇文章深入探讨了如何利用JavaScript进行前端表单的验证，涵盖了多种常见的验证需求，旨在确保用户输入的数据符合预期的格式和规则，从而提高用户体验并减少后端处理...
JavaScript表单验证控件Validator v1.05是一款用于网页前端数据验证的工具，它能够帮助开发者在用户提交表单前检查输入的数据是否符合预设的规则，从而提高用户体验并减少服务器端的压力。该控件通常包含一系列的...
JavaScript表单验证是Web开发中的一个关键环节，它在用户提交数据到服务器之前对输入进行检查，确保数据的完整性和准确性。在这个“改进后的javascript表单验证”中，我们将探讨如何提升用户体验，增强验证功能，并...