《JavaScript实现输入验证》的think

注册页面:

注册页面

 

源代码(与上一篇的《利用CSS对注册页面实现修饰》不一样的地方标注红色):

<!DOCTYPE html>
<html>
  <head>
    <title>注册页面</title>
    <style type="text/css">@import url(2-8-CSS.css);</style>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script language="javascript" src="2-10-javascript.js"></script> <!--这里采用的是链接外部JavaScript的方法-->
 
</head>
  <body>
   <form action="2-10-javascript.js">
    <table border="0" align="center" width="700">
    <tr><td colspan="3" align="center" height="40" id="title">填写注册信息</td></tr>
    <tr><td id="t">用户名:*</td>
        <td> <input type="text" name="username"></td>
        <td id="i">用户名由字母开头,后跟字母,数字或下划线!</td>
    </tr>
    <tr><td id="t">密码:*</td>
        <td> <input type="password" name="userpassword"></td>
        <td id="i">设置登录密码,至少6位!</td>
    </tr>
    <tr><td id="t">确认密码:*</td>
        <td> <input type="password" name="userpassword1"></td>
        <td id="i">请再输入一次你的密码!</td>
    </tr>
    <tr><td id="t">性别:*</td>
        <td> <input type="radio" name="usersex" value="男" checked>男
             <input type="radio" name="usersex" value="女">女</td>
        <td id="i">请选择你的性别!</td>
    </tr>
    <tr> <td id="t">邮箱地址:*</td>
         <td> <input type="text" name="useremail" ></td>
         <td id="i"> 请填写你的常用邮箱,可以用次此邮箱找回密码!</td>
    </tr>
    <tr><td valign="top" id="t">基本情况:*</td>
        <td colspan="2">
            <textarea name="userbasicinfo" rows="5" cols="50"></textarea></td>
    </tr>
    <tr><td colspan="3" align="center" height="40">
        <input type="checkbox" name="accept" value="yes">
                        我已仔细阅读并同意接受用户使用协议</td>
    </tr>
    <tr><td colspan="3" align="center" height="40">
        <input type="Button" value="确认" onClick="validate()"/>
        <input type="reset" value="取消">
        </td>
    </tr>
        </table>
    </form>
  </body>
</html>

2-10-JavaScript.js

function validate(){
    var name=document.forms[0].username.value;
    var pwd=document.forms[0].userpassword.value;
    var pwd1=document.forms[0].userpassword1.value;
    var email=document.forms[0].useremail.value;
    var accept=document.forms[0].accept.checked;
    var reg1=/[a-zA-Z]\w*/;     //这里使用的是正则表达式
    var reg2=/\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/;  
    if(name.length<=0)alert("用户名不能为空!");
    else if(!reg1.test(name))alert("用户名格式不正确!");
    else if(pwd.length<6) alert("密码长度必须大于等于6!");
    else if(pwd!=pwd1) alert("两次密码不一致!");
    else if(!reg2.test(email)) alert("邮件格式不正确!");
    else if(accept==false) alert("您需要仔细阅读并同意接受用户使用协议!");
    else document.forms[0].submit();
}

测试界面:

测试界面

 

这个案例用到了正则表达式,因此翻看了上学期的java课本复习了一下。

[a-zA-Z]:表示可以是a-zA-Z中包含的任何一个字母。

\w:表示可用于标识符的字符(不包括美元符号)。

\w*:表示*的前一个字符出现零次或多次。

/:表示正则表达式的开始和结束。

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值