ホームページ > 記事 > ウェブフロントエンド > 登録ページフォーム検証のJavaScript実装の共有例
以下のエディターは、JavaScript を使用して登録ページのフォーム検証を完了する例を示します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして一緒に見てみましょう
1. ステップ分析
最初のステップ: イベント (onsubmit) を決定し、それに関数をバインドします
2 番目のステップ: この関数を作成します (ユーザーを取得)データを入力(データを取得する際、指定された場所にIDを定義する必要があります>)
ステップ 3: ユーザーが入力したデータを判断する
ステップ 4: データが正当であるかどうかを判断する(フォームを送信する)
ステップ 5 : データが不正です (エラー メッセージが表示され、フォームの送信が許可されません)
質問: フォームの送信を制御するにはどうすればよいですか?
onsubmitイベントについて: 通常フォーム送信に使用されるため、関数定義時に戻り値を与える必要があります。
onsubmit = return checkForm()
2. 登録ページのフォーム検証を完了します
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script> function checkForm(){ //alert("aa"); /**校验用户名*/ //1.获取用户输入的数据 var uValue=document.getElementById("user").value; //alert(uValue); 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!=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("邮箱格式不正确!"); } } </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一个一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px"/> </td> <td width="33.3%"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物车</a> </td> </tr> </table> </td> </tr> <!--2.导航栏部分--> <tr height="50px" > <td bgcolor="black"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font size="3" color="white">首页</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">手机数码</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">电脑办公</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">鞋靴箱包</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">家用电器</font></a> </td> </tr> <!--3.注册表单--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一个十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> USER REGISTER </td> </tr> <tr> <td>用户名</td> <td> <input type="text" name="user" size="35px" id="user"/> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" size="35px" id="password"/> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" name="repassword" size="35px" id="repassword"/> </td> </tr> <tr> <td>E-mail</td> <td> <input type="text" name="e-mail" size="35px" id="email"/> </td> </tr> <tr> <td>姓名</td> <td> <input type="text" name="username" size="35px"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="birthday" size="35px"/> </td> </tr> <tr> <td>验证码</td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </td> </tr> <!--4.广告图片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情链接和版权信息--> <tr> <td align="center"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>关于我们</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>联系我们</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>招贤纳士</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>法律声明</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>友情链接</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>支付方式</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>配送方式</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>服务声明</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>广告声明</font></a> <p> Copyright © 2005-2016 hh商城 版权所有 </p> </td> </tr> </table> </body> </html>
検証と確認のパスワード部分に正規表現を使用します(覚えておく必要はありません、必要に応じて文書を参照してください) )
正規表現.test(検証対象)は、条件を満たしていればtrue、falseの場合は満たしていません。
以上が登録ページフォーム検証のJavaScript実装の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。