(四) 表单验证技术

(四)  表单验证技术

进行表单验证:
    (思路)获取表单元素的值并进行判断;在表单的提交事件中调用表单验证函数

表单元素的值都为string类型。
string的常用属性和方法(和java相同,唯一区别就是java中的length是方法)
   
   
  1. var str = "hello niit";
    属性:length                获取字符个数
   
   
  1. //获取字符的长度
  2. alert(str.length);
    方法:indexOf             查找字符串的位置         lastIndexOf
   
   
  1. //获取指定字符的索引位置
  2. alert(str.indexOf("h",3));
  3. alert(str.lastIndexOf("i"));
               charAt               获取指定索引位置的字符
   
   
  1. //获取指定索引对应的字符
  2. alert(str.charAt(0));
               substring(起始位置,结束位置)          根据索引位置来截取
   
   
  1. //根据索引位置截取
  2. alert(str.substring(4,7));
               substr(起始位置,截取的长度)               根据长度来截取
   
   
  1. //根据长度截取
  2. alert(str.substr(4,3));
               charCodeAt      获取字符对应的ASCII的值
   
   
  1. //获取字符对应的ASCII值
  2. alert("_".charCodeAt(0));
               String.fromCharCode        根据ASCII值获取对应的字符
   
   
  1. //根据ASCII值获取对应的字符
  2. alert(String.fromCharCode(65));


表单提交方式
    表单验证失败,表单还是会提交。两种方式阻止失败的表单提交。
    1)onsubmit事件,只有按钮的type 为submit 才能被触发。
        onsubmit ="return 函数"   onsubmit = true 才会提交
        验证的方法里需要返回值  判断是否能够提交
   
   
  1. <form id="loginForm" action="success.html" method="post" onsubmit="return validate()">
  2. userName:<input type="text" id="userName" /><br />
  3. password:<input type="password" id="password" /><br />
  4. <input type="submit" value="login" />
  5. </form>
    
    
  1. function validate(){
  2. //alert("表单被提交了");
  3. //判断用户名是否填写
  4. if(nameTag.value == ""){
  5. alert("请填写用户名!");
  6. return false;
  7. }
  8. //判断密码是否填写
  9. if(pwdTag.value == ""){
  10. alert("请填写密码!");
  11. return false;
  12. }
  13. //判断密码长度不能低于6位
  14. if(pwdTag.value.length < 6){
  15. alert("密码长度不能小于6位!");
  16. return false;
  17. }
  18. }

    2)获取表单元素.submit()的方式
提交按钮要用普通按钮,并且添加点击事件 οnclick="函数"
验证时出现错误需要退出方法 return
   
   
  1. <form id="loginForm" action="success.html" method="post">
  2. userName:<input type="text" id="userName" /><br />
  3. password:<input type="password" id="password" /><br />
  4. <input type="button" value="login" onclick="validate()" id="loginButton"/>
  5. </form>
    
    
  1. function validate(){
  2. //判断用户名是否填写
  3. if(nameTag.value == ""){
  4. alert("请填写用户名!");
  5. //使光标聚焦文本框
  6. nameTag.focus();
  7. return;
  8. }
  9. //判断密码是否填写
  10. if(pwdTag.value == ""){
  11. alert("请填写密码!");
  12. pwdTag.focus();
  13. return;
  14. }
  15. //获取用户名
  16. var userName = nameTag.value;
  17. //判断用户名是否有效:只能包含数字字母和下划线
  18. for(var i = 0; i < userName.length; i++){
  19. //获取每个字符对应的ASCII
  20. var code = userName.charCodeAt(i);
  21. //获取每个字符
  22. var ch = userName.charAt(i);
  23. //alert(code);
  24. //判断每个字符是否有效
  25. //if((code < 48 || code > 57) && (code < 97 || code > 122) && code != 95){
  26. // alert("用户名必须由数字字母下划线构成!");
  27. // return;
  28. // }
  29. if(!(ch >= "0" && ch <= "9" || ch >= "a" && ch <= "z" || ch == "_")){
  30. alert("用户名必须由数字字母下划线构成!");
  31. //选中当前的文本
  32. nameTag.select();
  33. return;
  34. }
  35. }
  36. //判断密码长度不能低于6位
  37. if(pwdTag.value.length < 6){
  38. alert("密码长度不能小于6位!");
  39. return;
  40. }
  41. //提交表单
  42. var loginForm = document.getElementById("loginForm");
  43. //loginForm.action = "http://www.baidu.com";
  44. loginForm.submit();
  45. }

focus() 使光标聚焦在文本框
select()选中当前的文件


正则表达式(严格区分大小写)
        正则表达式就是描述复杂规则的工具。
   
   
  1. //编写正则表达式
  2. var rule =/^正则表达式$/;
  3. //使用正则表达式验证
  4. if(rule.test(values)){
  5. alert("验证成功");
  6. }

元字符
            var   rule   =   /正则表达式 /;
    常用的元字符:
            \s                        匹配任意的空白字符
            ^                          匹配字符的开始
            $                         匹配字符的结束
            .                          除换行符以外的任意字符(最少一位)
            \w                       匹配字母数字或下划线或汉字(汉字只能在java中使用)
            \d                        匹配数字 0-9
            \b                        匹配单词的开始或结束(成对出现)\b   \b第一个表示开始,第二个表示结束    每个单词需要使用空格间隔
\S   \W   \D  表示相反的意思

    常用的限定符
           *                           重复任意次数 或  0 次
           +                          重复至少一次
           ?                          一次或 0 次
           {n}                       匹配 n 次
           {n,}                      匹配 n 以上的次数 
           {n,m}                   匹配 n 到 m 的次数

1)模糊匹配(输入的有hello就可以)
   
   
  1. /hello/
2)精确匹配  ^开始     $结束(只能输入hello)
   
   
  1. /^hello$/
3)匹配Hello 或 hello
   
   
  1. /^(hello)|(Hello)$/
  2. /^(h)|(H)ello$/
4)参数i表示不区分大小写(输入HELLO都可以)
   
   
  1. var rule = /^hello$/i;
5)匹配任意字符(至少一位)
   
   
  1. /./
    匹配任意一位字符
   
   
  1. /^.$/
6)匹配niit.com或者是niit.cn          普通的  .  需要转移   \ .
   
   
  1. /^niit\.((com)|(cn))$/
7)匹配2位数字或字母或下划线(下面用限定符更简单)
   
   
  1. /^\w\w$/
8)匹配1位数字 0-9
   
   
  1. /^\d$/
9)\b表示单词的开始或结束,每个单词间需要使用空格间隔
   
   
  1. /\bhello\b/
10)任意多次的a
   
   
  1. /^a*$/
         匹配niit开头的任意多的数字最后位是任意字符
   
   
  1. /^niit\d*.$/
11)匹配niit后至少有一个com
   
   
  1. /^niit(com)+$/
12)匹配niit开头,后一位要么是数字要么就没有
   
   
  1. /^niit\d?$/
13)匹配4位数字
   
   
  1. /^\d{4}$/
    匹配2-4位的数字
   
   
  1. /^\d{2,4}$/
匹配2位以上的数字
   
   
  1. /^\d\d+$/
  2. /^\d{2,}$/
14)匹配1个字符必须是a或者b或者c
   
   
  1. /^[abc]$/
  2. /^[a-c]$/
15)任意一个数字字母或下划线   \w
   
   
  1. /^(([0-9])|([a-z])|([A-Z])|_)$/
16)匹配任意多个数字,要求数字范围在0-5之间
   
   
  1. /^[0-5]*$/
17)单字符不为a或b或c
   
   
  1. /^[^abc]$/
18)不能为数字
   
   
  1. /^\D$/
不能为数字字母或下划线
   
   
  1. /^\W$/
验证邮箱
   
   
  1. //验证邮箱
  2. //var rule = /^\w+@(\w+\.[a-z,A-Z]+)+$/;


其他的特效
1)回车切换输入
        使用键盘输入事件onkeyDown事件
        检查输入的是否是回车键-(ASCII码13,tab键的ASCII码为9)
        输入改为Tab键的ASCII  
onkeyDown 和 onKeyPress事件的区别
        onKeyDown事件可以获取所以按键的ASCII,但是对大小写字母不敏感,始终获取大写字母的ASCII
        onKeyPress事件只能获取按键区的ASCII,对大小写字母敏感。
   
   
  1. function keyDown(){
  2. //获取按键的ASCII
  3. var code = event.keyCode;
  4. //如果按下的是回车键,则更改为TAB键
  5. if(code == 13){
  6. event.keyCode = 9;
  7. }
  8. //判断当前的事件源
  9. //alert(event.srcElement);
  10. if(event.srcElement.type == "button" && event.srcElement.value == "注册"){
  11. //提交表单
  12. registForm.submit();
  13. }
  14. }


2)innerHTML提示信息
  通过  span对象.innerHTML=“”在页面上显示
innerHTML 和 innerText 的区别:
innerHTML 可以解析HTML代码
innerText是纯文本内容



3)即时错误提示特效
  onfocus事件( 聚焦事件)   和   onblur事件(失去聚焦事件 )
       当文本框失去聚焦时校验输入内容。
   
   
  1. <form action="success.html" method="post" onsubmit="return validate()">
  2. <table>
  3. <tr>
  4. <td>用户名:</td>
  5. <td><input id="name" type="text" onblur="validateName(this)"/><span id="nameError"></span></td>
  6. </tr>
  7. <tr>
  8. <td>密码:</td>
  9. <td><input id="pwd" type="password" onblur="validatePwd(this)"/><span id="pwdError"></span></td>
  10. </tr>
  11. <tr>
  12. <td colspan="2"><input type="submit" value="登录" /></td>
  13. </tr>
  14. </table>
  15. </form>
    
    
  1. <script>
  2. var nameSpan = document.getElementById("nameError");
  3. var pwdSpan = document.getElementById("pwdError");
  4. var nameTag = document.getElementById("name");
  5. var pwd = document.getElementById("pwd");
  6. function validateName(obj){
  7. nameSpan.innerHTML = "";
  8. //非空校验
  9. if(obj.value == ""){
  10. nameSpan.innerHTML = "请填写用户名";
  11. return false;
  12. }
  13. //用户必须是3-12位以上的数字字母下划线
  14. var rule = /^\w{3,12}$/;
  15. if(!rule.test(obj.value)){
  16. nameSpan.innerHTML = "用户名由是3-12位以上的数字字母下划线构成";
  17. return false;
  18. }
  19. return true;
  20. }
  21. function validatePwd(obj){
  22. pwdSpan.innerHTML = "";
  23. if(obj.value == ""){
  24. pwdSpan.innerHTML = "请填写密码";
  25. return false;
  26. }
  27. var rule = /^\w{6,12}$/;
  28. if(!rule.test(obj.value)){
  29. pwdSpan.innerHTML = "密码长度为6~12位";
  30. return false;
  31. }
  32. return true;
  33. }
  34. function validate(){
  35. if(!(validateName(nameTag) && validatePwd(pwd))){
  36. return false;
  37. }
  38. }
  39. </script>

4)拖拽层移动
鼠标按下事件 onmousedown      
鼠标移动事件  onmousemove
鼠标松开事件 onmouseup
   两种方式:
            1)当鼠标点击时,获取该鼠标的坐标,当鼠标移动时,计算移动的x、y距离,然后加上原来的top  和 left 就可以得到现在层的top 和 left值
             2)当鼠标点击时,获取该鼠标的坐标到层的上左边距离,当鼠标移动时,获取鼠标的event.x,event.y  分别减去初始鼠标位置到层上左边距离 就可以得到现在层的top 和 left值。  
   
   
  1. <body>
  2. <div id="div" style="width:100px; height:100px; position:absolute; left:200px; top:50px; background-color:#06F"></div>
  3. <script>
  4. var div = document.getElementById("div");
  5. //鼠标按下的状态
  6. var hasClick = false;
  7. //鼠标的坐标
  8. var x;
  9. var y;
  10. //层的边距
  11. var divLeft;
  12. var divTop;
  13. //鼠标按下的事件
  14. div.onmousedown = function(){
  15. //记录按下的状态
  16. hasClick = true;
  17. //记录按下的点的坐标
  18. x = event.x;
  19. y = event.y;
  20. //记录当前层的边距
  21. divLeft = parseInt(div.style.left);
  22. divTop = parseInt(div.style.top);
  23. }
  24. //鼠标移动的事件
  25. document.onmousemove = function(){
  26. //判断鼠标是否按下
  27. if(hasClick){
  28. //记录移动中的点的坐标
  29. var nowX = event.x;
  30. var nowY = event.y;
  31. //计算移动的距离
  32. var moveX = nowX-x;
  33. var moveY = nowY-y;
  34. //改变层的位置
  35. div.style.left = divLeft+moveX+"px";
  36. div.style.top = divTop+moveY+"px";
  37. }
  38. }
  39. //鼠标松开的事件
  40. div.onmouseup = function(){
  41. hasClick = false;
  42. }
  43. </script>
  44. </body>
 



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值