Javascript- Javascript学习

javascript事件

表单提交事件:onsubmit

javascript的输出:

警告框:alert();

向页面指定位置写入内容:innerHTML(属性)

向页面写入内容:document.write("")

表单提交步骤分析:

第一步:确定事件(onsubmit)并为其绑定一个函数

第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id >)

第三步:对用户输入的数据进行判断

第四步:数据合法(让表单提交)

第五步:数据非法(给出错误提示信息,不让表单提交)

问题:如何控制表单提交?

  关于事件onsubmit:一般用于表单提交的位置

<form action="#" method="get" name="regForm" onsubmit="return checkForm()">

一个使用JS完成表单注册校验的例子

<script>
            function checkForm(){
                //alert("aaa")
                /** 校验用户名 **/
                //1.获取用户输入的数据
                var uValue = document.getElementById("user").value;
                if(uValue==""){
                    //2.给出错误提示信息
                    alert("用户名不能为空!");
                    return false;
                }
                
                /** 校验密码*/
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                        alert("密码不能为空!");
                        return false
                }
                
                
                /** 校验确认密码*/
                var rpValue = document.getElementById("repassword").value;
                if(rpValue == ""){
                    alert("确认密码不能为空!");
                    return false;
                }else if(rpValue != pValue){
                    alert("两次密码输入不一致!");
                    return false;
                }
                
                /**校验邮箱 */
                var eValue = document.getElementById("email").value;
                if(! /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("邮箱格式不正确!");
                    return false;
                }
                
            }
        </script>

一些常用的正则表达式示例:

1、匹配所有的正数:^[0-9]+$

2、匹配所有的小数:^\-?[0-9]*\.?[0-9]*$

3、匹配所有的整数:^\-?[0-9]+$

4、提取信息中的中文字符串: [\u4e00-\u9fa5]* ; 

5、提取信息中的邮件地址:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
6、提取信息中的中国手机号码:(86)*0*13\d{9}
7、提取信息中的中国固定电话号码:(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}
8、提取信息中的中国邮政编码:[1-9]{1}(\d+){5}
9、提取信息中的中国身份证号码:\d{18}|\d{15}
10、提取信息中的任何数字:(-?\d*)(\.\d+)?
11、匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/

12、匹配邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

则表达式用于字符串处理、表单验证等场合,实用高效。
现将一些常用的表达式收集于此,以备不时之需。

匹配中文字符的正则表达式: [\u4e00-\u9fa5]
评注:匹配中文还真是个头疼的事,有了这个表达式就好办了

匹配双字节字符(包括汉字在 内):[^\x00-\xff]
评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

匹配空白行的正 则表达式:\n\s*\r
评注:可以用来删除空白行

匹配HTML标记的正则表达式:<(\S*?) [^>]*>.*?</\1>|<.*? />
评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对 于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式:^\s*|\s*$
评注:可以用来删除行首行尾的空白字符(包括空 格、制表符、换页符等等),非常有用的表达式

匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.] \w+)*\.\w+([-.]\w+)*
评注:表单验证时很实用

匹配网址URL的正则表达式:[a-zA- z]+://[^\s]*
评注:网上流传的版本功能很有限,上面这个基本可以满足需求

匹配帐号是否合法(字母开头,允许5-16 字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注:表单验证时很实用

匹配国内电话号 码:\d{3}-\d{8}|\d{4}-\d{7}
评注:匹配形式如 0511-4405222 或 021-87888822

匹 配腾讯QQ号:[1-9][0-9]{4,}
评注:腾讯QQ号从10000开始

匹配中国邮政编码:[1-9]\d{5}(?! \d)
评注:中国邮政编码为6位数字

匹配身份证:\d{15}|\d{18}
评注:中国的身份证为15位或18位

匹 配ip地址:\d+\.\d+\.\d+\.\d+
评注:提取ip地址时有用

匹配特定数字:
^[1-9]\d*$     //匹配正整数
^-[1-9]\d*$   //匹配负整数
^-?[1-9]\d*$   //匹配整数
^[1-9]\d*|0$   //匹配非负整数(正整数 + 0)
^-[1-9]\d*|0$   //匹配非正整数(负整数 + 0)
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$    //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$  //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$   //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$   //匹配非负浮点数(正浮点 数 + 0)
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$  //匹配非正浮点数(负浮点 数 + 0)
评注:处理大量数据时有用,具体应用时注意修正

匹配特定字符串:
^[A-Za-z]+$  //匹配由26 个英文字母组成的字符串
^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串
^[a-z]+$  //匹配由26个英文字母 的小写组成的字符串
^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串
^\w+$  //匹配由数字、26个 英文字母或者下划线组成的字符串
评注:最基本也是最常用的一些表达式

加了时间验证的

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-)) (20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$

猜你喜欢

转载自www.cnblogs.com/RzCong/p/9279772.html