js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流 ,数显我们要知道表单验证需要的技术点, String对象,事件,函数
一:String对象;通常是对字符串的操作;
1,String的属性;
字符串.length;表示该字符串的长度; var str= "java"; var len = str.length;
len的结果是4;
2,字符串对象常用的方法;
格式:字符串.方法名();
字符串常用的方法;
toLowerCase() 将字符串转为小写 toUpperCase() 将字符串转为大写 charAt(index) 返回指定位置的字符 indexOf(字符串,index) 查找指定位置的字符在字符串中第一次出现的位置 substring(index1,index2) 截取两者之间的内容,包括index1 不包括index2
2,表单验证常用的事件,方法,属性
事件
onblur失去焦点触发 onfocus获得焦点时触发 onkeypress按键按下时触发 onclick 点击时触发
方法;
blur 从文本中移开 focus 焦点 select 选取文本区域内容
属性;
id 设置或返回id value 设置或返回文本域的值
3,innerHTML属性;
设置提示信息;
4,DOM对象;
通过标签名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
5,综合运用上述的技术点做一个简单的表单验证
思路:
a,使用html制作form表格,及内容 b,使用dom获取元素 c,通过时间触发函数
代码完整实现:正则表达式有些检测不出来
<html>
<head>
<style type="text/css">
table{
width:80%;
height:300px;
}
.float_right{
text-align:right;
color:#0000ff;
font-size:14px;
font-weight:bold;
}
form div{float:left;position:relative}
form input{float:left}
</style>
<script type="text/JavaScript">
//输入框中的提示
function fun_zhuce(element){
if(element.value=='全站唯一' || element.value=='正确的邮箱'){
element.value='';
}
}
//用户名的验证
function fun_tishiuser(){
//获取输入框的属性
var element = document.getElementById('userName');
//获取文本提示属性
var userinner = document.getElementById('innerclass');
//判断输入框的值是否为null
if(element.value==''){
element.value='全站唯一';
userinner.innerHTML="<span style='color:#cc0000'>必须输入账号!!</span>";
}else{
if(element.value.match('\\w{6,12}')){
userinner.innerHTML='账号格式正确!!';
}else{
userinner.innerHTML='账号必须是字母,数字,下划线 6~12位 !!';
}
}
}
//密码验证
function fun_pwd(){
var pwd = document.getElementById("pwd").value;
//获取文本提示属性
var innerpwd = document.getElementById('innerpwd');
//判断是否为空
if(pwd==''){
innerpwd.innerHTML="密码不能为空!!";
}else{
if(pwd.match('\\w{6,12}')){
innerpwd.innerHTML="密码格式正确";
}else{
innerpwd.innerHTML="密码只能是下划线,字母,数字组成";
}
}
}
//密码确认
function fun_pwd2(){
//获取密码和确认密码
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
//获取文本提示属性
var innerpwd2 = document.getElementById('innerpwd2');
if(pwd==pwd2){
innerpwd2.innerHTML="正确"
}else{
innerpwd2.innerHTML="密码不相等"
}
}
//邮箱验证
function fun_email(){
var email = document.getElementById("email").value;
var inneremail = document.getElementById("inneremail");
if(email==''){
inneremail.innerHTML='邮箱不能为空';
}else{
if( email.match('[a-zA-Z1-9][\\w]{3,8}\\@[\\w]+\\.[\\w]{2,5}\\.*[\\w]*')){
inneremail.innerHTML='邮箱格式正确!!';
}else{
inneremail.innerHTML='邮箱格式不正确!!';
}
}
}
</script>
</head>
<body >
<form action="secu.html" action="post">
<caption><h2>注册</h2></caption>
<table border=1px color="ff00000" cellspacing="0px" cellpadding="0px" >
<tr>
<td class="float_right" width=30%>账号:</td>
<td> <input type="text" name="userName" id="userName" value="全站唯一" onclick="fun_zhuce(this)" onblur="fun_tishiuser()">
<div id="innerclass"></div>
</td>
</tr>
<tr>
<td class="float_right" > 密码:</td>
<td><input type=""password" name="pwd" id="pwd" onblur="fun_pwd()">
<div id="innerpwd"></div>
</td>
</tr>
<tr>
<td class="float_right" >确认密码:</td>
<td> <input type=""password" name="pwd2" id="pwd2" onblur="fun_pwd2()">
<div id="innerpwd2"></div>
</td>
</tr>
<tr>
<td class="float_right">邮箱:</td>
<td> <input type="text" name="email" id="email" value="正确的邮箱" onclick="fun_zhuce(this)" onblur="fun_email()">
<div id="inneremail"></div>
</td>
</tr>
<tr>
<td colspan=2 align="center"><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>
相关推荐
三、AJAX表单验证技术 AJAX（Asynchronous JavaScript and XML）是一种基于JavaScript和XML的技术，可以实现实时的表单验证，从而减少用户的等待时间和提高用户体验。在PHP环境下，AJAX技术可以用于实现实时的表单...
在这个“JavaScript有关练习作业及表单验证技术”的主题中，我们将深入探讨JavaScript在处理表单验证中的关键概念和技术。 首先，表单验证是确保用户输入数据有效性和安全性的过程，它可以帮助我们防止无效数据进入...
本篇内容主要介绍了如何使用JavaScript实现基本的表单验证技术。 1. **表单验证的重要性** 表单验证通常在客户端进行，它能够及时反馈用户输入错误，减少无效数据提交给服务器，从而减轻服务器处理压力，提升用户...
PHP与AJAX（Asynchronous JavaScript and XML）结合的表单验证技术可以实现无刷新验证，即在用户输入时即时检查数据有效性，无需等待完整的表单提交，从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...
在IT行业中，表单验证是前端开发中一个至关重要的环节，尤其对于新手开发者而言，能够快速、有效地实现表单验证可以极大地提升...通过学习和使用这款插件，菜鸟开发者可以快速掌握表单验证技术，提升自己的编程技能。
以下是一些常见的JavaScript表单验证技术： 1. **非空验证**：检查用户是否填写了必填字段，通常使用`if (input.value.trim() === '')`判断。 2. **邮箱验证**：利用正则表达式验证输入的邮箱格式，如`/^\S+@\S+\....
在Java中，常用的表单验证技术有： - **使用JavaBean验证** - **Spring框架中的数据绑定和验证** - **使用第三方库如Hibernate Validator** 本文主要介绍使用JavaScript和jQuery结合进行前端表单验证的方法。 ###...
根据提供的文件信息，我们可以总结出以下几个关键的知识点： ### 1. JS 表单验证的基础概念 表单验证是Web开发中的一个重要环节，它确保用户...希望这些信息能帮助你更好地理解和运用JavaScript中的表单验证技术。
本主题聚焦于“万能通用智能JS表单验证”，这是一种利用JavaScript实现的高效、灵活的表单验证技术。表单验证是用户交互过程中的关键环节，它能够确保用户输入的数据符合预设的规则，从而减少服务器端的压力，提升...
### Extjs 表单验证详解 #### 一、引言 在现代Web开发中，确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架，提供了丰富的功能来...希望本文能帮助你更好地理解和应用Extjs的表单验证技术。
本篇文章将深入探讨基于jQuery的表单验证技术。 ### 1. jQuery简介 jQuery是由John Resig于2006年创建的一个轻量级的JavaScript库，它的核心特性是简化DOM操作、事件处理、动画效果和Ajax交互。jQuery的语法简洁，...
在2008年7月，jQuery 表单验证技术得到了更新，提供了更高效和用户友好的验证方法。这里我们将详细介绍以下几个关键知识点： 1. **jQuery 基础**：在开始表单验证之前，需要了解 jQuery 的基本用法，如选择器（如 `...
综合以上，本项目的“上传文件验证表单”通过Bootstrap实现美观的页面布局，借助Webuploader实现文件上传功能，并结合表单验证技术保证了用户输入数据的有效性。这样的页面对于任何需要用户上传文件的Web应用都是一...
《表单验证详细教程》是一本专注于Web开发中表单验证技术的指南，主要针对HTML、JavaScript以及服务器端验证进行深入讲解。表单验证在Web应用程序中起着至关重要的作用，它确保用户输入的数据符合预设的规范，从而...
**jQuery表单验证插件详解** 在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而提高用户体验...无论是新手还是经验丰富的开发者，掌握jQuery表单验证技术都是必不可少的技能之一。
JavaScript是Web开发中不可或缺的一部分，尤其在处理用户输入...通过深入理解并实践这些JavaScript表单验证技术，你将能够创建更安全、用户体验更好的Web应用。记得不断学习和更新知识，以适应不断发展的Web技术环境。
【万能表单验证】是一种高效且全面的前端数据验证技术，它旨在确保用户在填写网页表单时输入的数据符合预设的规则和格式。在Web开发中，表单验证是必...学习和掌握表单验证技术，对于任何Web开发者来说都是至关重要的。