Javascript- Javascript学习

Posted 2020-12-02 RZ_Lee

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_-])[email protected]([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*13d{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_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

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

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

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

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

匹配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]|1d|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$