Javascript_06_表单验证(离开单项,输入框后提示信息)
Javascript_06_ 表单验证(离开单项,输入框后提示信息)
说明:对于必须输入的入力框,光标离开(使用 onblur方法)时进行检查。假如有错,红色的提示信息直接在该画面的这个输入框的后面显示出来,并把光标重新定向到这个输入框。
待解决问题:
① 内存泄漏问题:比如用户名没输入,离开用户名输入框时,画面上会给出提示警告信息;此时再点击密码输入框时,会导致 IE占用很大的内存,好像是内存泄漏了。
② 对于选择框的检查问题(上述方法是在从输入框离开时进行检查),对于选择框,我直接没有点击选择,又怎么检查呢?此问题扩展开来,假如用户直接没有将光标放入过必须输入项,那这一项的检查也就无从谈起了。极端些,假如用户什么也没有输入,就直接点击提交,这种检查机制就不会起作用。前面那个弹警告框的验证方式,虽然用户体验不太好,但是肯定能起作用。
这边只是先将这种用户体验比较好的检查机制的原理用代码表现一下,以下的这两个文件还需要改善。但这种用户体验比较好的检查机制是以后的发展方向,也是我们要努力的方向。
1. regcheckdata2.js
- function checkdata() {
- var ssn=form.username.value.toLowerCase();
- if (!checkUserName(ssn)) return false; //用户名检查
- var pwd1 = form.pwd.value;
- if (!checkPassword1(pwd1)) return false; //密码1检查
- var pwd2 = form.pwd2.value;
- if (!checkPassword1(pwd2)) return false; //确认密码检查
- //检查性别
- if( !(form.sex[0].checked || form.sex[1].checked) ) {
- alert("请选择性别!");
- form.sex[0].focus();
- return false;
- }
- //检查省份
- if( form.province.selectedIndex == 0 ) {
- alert("请选择省份!");
- form.province.focus();
- return false;
- }
- if(form.intro.value == "") {
- alert("/自我介绍不能为空!");
- form.intro.focus();
- return false;
- }
- return true;
- }
- // 用户名检查
- function checkUserName(ssn){
- if( ssn.length<3 || ssn.length>18 ) {
- document.getElementById("usernameErr").innerHTML = "<font color='red'>
- 请输入正确的用户名,用户名长度为3-18位!</font>";
- form.username.focus()
- return false;
- }
- if (isWhiteWpace(ssn)){
- document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名中不能包含空格!</font>";
- form.username.focus()
- return false;
- }
- if (!isSsnString(ssn)){
- document.getElementById("usernameErr").innerHTML = "<font color='red'>对不起,您选择的用户名不正确或已被占用!用户名/n由a~z的英文字母(不区分大小写)、0~9的数字、点、减/n号或下划线组成,长度为3~18个字符,只能以数字或字母/n开头和结尾,例如:kyzy_001。</font>";
- form.username.focus()
- return false;
- }
- //输入正确的用户名后,将上次的错误提示信息清掉
- document.getElementById("usernameErr").innerHTML = "";
- return true;
- }
- //密码检查
- function checkPassword1(pwd1) {
- if( strlen(pwd1)<6 || strlen(pwd1)>16 ) {
- //alert("/正确地登录密码长度为6-16位,仅可用英文、数字、特殊字符!")
- document.getElementById("pwdErr").innerHTML = "<font color='red'>正确地登录密码长度为6-16位,仅可用英文、数字、特殊字符!</font>";
- form.pwd.focus()
- return false;
- }
- if( strlen2(pwd1) ) {
- //alert("/您的密码中包含了非法字符,仅可用英文、数字、特殊字符!")
- document.getElementById("pwdErr").innerHTML = "<font color='red'>您的密码中包含了非法字符,仅可用英文、数字、特殊字符!</font>";
- form.pwd.focus()
- return false;
- }
- if( pwd1 == form.username.value ) {
- //alert("/用户名和密码不能相同!")
- document.getElementById("pwdErr").innerHTML = "<font color='red'>密码和用户名不能相同!</font>";
- form.pwd.focus()
- return false;
- }
- document.getElementById("pwdErr").innerHTML = "";
- return true;
- }
- //确认密码检查
- function checkPassword2(pwd2) {
- if( pwd2 =="" ) {
- //alert("/请输入密码确认!")
- document.getElementById("pwd2Err").innerHTML = "<font color='red'>请输入密码确认!</font>";
- form.pwd2.focus()
- return false;
- }
- if( pwd2 != form.pwd.value ) {
- //alert("/两次密码输入不一致!")
- document.getElementById("pwd2Err").innerHTML = "<font color='red'>两次密码输入不一致!</font>";
- form.pwd2.focus()
- return false;
- }
- document.getElementById("pwd2Err").innerHTML = "";
- return true;
- }
- function strlen(str){
- var len;
- var i;
- len = 0;
- for (i=0;i<str.length;i++){
- if (str.charCodeAt(i)>255) len+=2; else len++;
- }
- return len;
- }
- function strlen2(str){
- var len;
- var i;
- len = 0;
- for (i=0;i<str.length;i++){
- if (str.charCodeAt(i)>255) return true;
- }
- return false;
- }
- function isWhiteWpace (s)
- {
- var whitespace = " /t/n/r";
- var i;
- for (i = 0; i < s.length; i++){
- var c = s.charAt(i);
- if (whitespace.indexOf(c) >= 0) {
- return true;
- }
- }
- return false;
- }
- function isSsnString (ssn)
- {
- var re=/^[0-9a-z][/w-.]*[0-9a-z]$/i;
- if(re.test(ssn))
- return true;
- else
- return false;
- }
- function checkssn(gotoURL) {
- var ssn=form.username.value.toLowerCase();
- if (checkUserName(ssn)){
- var open_url = gotoURL + "?username=" + ssn;
- window.open(open_url,'','status=0,directories=0,resizable=0,toolbar=0,location=0,scrollbars=0,width=322,height=200');
- }
- }
2. userReg2.html
- <html>
- <head>
- <title>表单</title>
- <mce:script language=JavaScript src="script/regcheckdata.js" mce_src="script/regcheckdata.js"></mce:script>
- <mce:script type="text/javascript"><!--
- // --></mce:script>
- </head>
- <body>
- <form name="form" action="01.html" method="get" onSubmit="return checkdata()">
- <table width="750" align="center" border="2">
- <tr>
- <td colspan="2" align="center">用户注册</td>
- </tr>
- <tr>
- <td>用户名:</td>
- <td>
- <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">
- <span id="usernameErr"></span>//同一行(首选)
- <!--<div id="usernameErr"></div>-->//另起一行
- </td>
- </tr>
- <tr>
- <td>密码:</td>
- <td>
- <input type=password name="pwd" size="15" maxlength="12" onblur="checkPassword1(this.value)">
- <span id="pwdErr"></span>
- </td>
- </tr>
- <tr>
- <td>密码确认</td>
- <td>
- <input type=password name="pwd2" size="15" maxlength="12" onblur="checkPassword2(this.value)">
- <span id="pwd2Err"></span>
- </td>
- </tr>
- <tr>
- <td>性别</td>
- <td>
- <input type=radio name="sex" value="male">男
- <input type=radio name="sex" value="female">女
- </td>
- </tr>
- <tr>
- <td>你感兴趣</td>
- <td>
- <input type="checkbox" name="interest" value="vc" checked>VC
- <input type="checkbox" name="interest" value="vb">VB
- <input type="checkbox" name="interest" value="vfoxpro">VF
- <input type="checkbox" name="interest" value="vjava">VJ
- <br>
- <input type="checkbox" name="interest" value="bc">BC
- <input type="checkbox" name="interest" value="cobol">CO
- <input type="checkbox" name="interest" value="java">JA
- <input type="checkbox" name="interest" value="delphi">Delphi
- </td>
- </tr>
- <!--必须选中JSP-->
- <input type="hidden" name="interest" value="jsp">
- <tr>
- <td>你感兴趣</td>
- <td>
- <select name="interest2" size=8 multiple>
- <option value="vc" selected>VC</option>
- <option value="vb">VB</option>
- <option value="vfoxpro">VF</option>
- <option value="vjava">VJ</option>
- <option value="bc">BC</option>
- <option value="cobol">CO</option>
- <option value="java">JA</option>
- <option value="delphi">Delphi</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>你来自</td>
- <td>
- <select name="province">
- <option value=0 selected>请选择</option>
- <option value=34>安徽</option>
- <option value=11>北京</option>
- <option value=50>重庆</option>
- <option value=35>福建</option>
- <option value=62>甘肃</option>
- <option value=44>广东</option>
- <option value=45>广西</option>
- <option value=52>贵州</option>
- <option value=46>海南</option>
- <option value=13>河北</option>
- <option value=23>黑龙江</option>
- <option value=41>河南</option>
- <option value=42>湖北</option>
- <option value=43>湖南</option>
- <option value=32>江苏</option>
- <option value=36>江西</option>
- <option value=22>吉林</option>
- <option value=21>辽宁</option>
- <option value=64>宁夏</option>
- <option value=15>内蒙古</option>
- <option value=63>青海</option>
- <option value=31>上海</option>
- <option value=14>山西</option>
- <option value=37>山东</option>
- <option value=51>四川</option>
- <option value=61>陕西</option>
- <option value=12>天津</option>
- <option value=54>西藏</option>
- <option value=65>新疆</option>
- <option value=53>云南</option>
- <option value=33>浙江</option>
- <option value=71>台湾</option>
- <option value=81>香港</option>
- <option value=82>澳门</option>
- <option value=0>其他</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>自我介绍</td>
- <td>
- <textarea rows="12" cols="80" name="intro">
Javascript_06_表单验证(离开单项,输入框后提示信息)的更多相关文章
- ASP.NET 表单验证实现浅析
首先,自然是配置 Web.config,在 <system.web> 下设定: <authentication mode="Forms"> <form ...
- Angular自定义表单验证
前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...
- SPA项目开发--表单验证、增删改
1. 表单验证 Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则, 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form- ...
- ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
- Extjs 表单验证后,几种错误信息展示方式
今天要求对form表单验证,进行系统学习一下,故做了几个示例: Ext.onReady(function(){ var panel=Ext.create('Ext.form.Panel' ...
- python :表单验证--对每一个输入框进行验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- ElementUi 表单验证失败后 页面滚动到表单验证失败位置
1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...
- JQuery制作网页——第九章 表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
- JQuery制作网页——表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
随机推荐
- 所有人都可以是开发人员——《Office 365开发入门指南》视频教程即将上市
今天是春节假期的最后一天,在这里给全国的朋友们拜个晚年,祝大家身体健康,晚年幸福啊.这个春节大家过的怎么样啊,我自己是在老家过的年,家乡的年味还是比较浓的,也再次感谢朋友圈的大家给我看了各地的风光 ...
- mysql分页存储过程一步一步实现
1. CREATE DEFINER=`root`@`localhost` PROCEDURE `P_HoverTreePages`( ), ) , ), ), ), IN `SortType` INT ...
- Linux-bg和fg命令(19)
使用ctrl+z将程序挂在后台: jobs 查看后台的命令: fg(fore go) 将后台的命令,放置前台(fore)继续执行,比如:fg 2 //等价于vi 2.txt bg(back g ...
- MySQL8.0设置远程访问权限
mysql 8.0.11 用Navicat远程无法连接 症状: 安装了mysql 8.0.11 之后本地可以登录,但是远程第三方工具无法连接,防火墙已经放通的, 解决之道: 首先登陆到mysql命令行 ...
- 【Java每日一题】20170221
20170220问题解析请点击今日问题下方的“[Java每日一题]20170221”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...
- mybatis笔记02
目录 0. 文章目录 1. Mybatis映射文件 1.1 输入映射 1.2 输出映射 1.3 resultMap 2. 动态SQL 2.1 if和where 2.2 foreach循环 2.3 sq ...
- MySQL技巧(二)——无限级分类表设计
无限级分类表的设计(掌握'自身连接') 类似图书这种,会有很多种分类,而且在现实生活中这种分类会无限的往下分,所以不可能每有一个分类就创建一个分类表.应该使用下面这种语句 DROP TABLE IF ...
- MyBatis中映射器Mapper概述
MyBatis真正强大之处在于它的映射器.因为它异常强大并且编写相对简单,不仅比传统编写SQL语句做的更好并且能节省将近95%的代码量 XML中顶级元素汇总 cache: 给定命名空间的缓存配置 ca ...
- javascript中Ajax的简单封装
GET方式的在线:DEMO POST方式在线:DEMO // 1.封裝AJAX函數 function nativeAjax(option,success,error){ // 定义domain,方便环 ...
- springboot整合netty(二)
目录 前言 正文 代码 1. 新建一个springboot项目,在pom文件中添加netty依赖: 2.新建netty服务 3.netty调用所需的服务类 4 springboot启动类 5.测试 我 ...