使用正则表达式写网易通行证
css樣式；
//首先全局選擇器（*）內邊距、外邊距、樣式都設為0或無。
//根據html類名來設置所需樣式。
<style type="text/css">
*{
? ? ? ? margin:0;
? ? ? ? padding:0;
? ? ? ? list-style: none;
? ? }
? ? .easy{
? ? ? ? font-size: 36px;
? ? ? ? color:red;
? ? ? ? padding-left: 30px;
? ? }
? ? .cord{
? ? ? ? font-size: 36px;
? ? }
? ? .bigbox{
? ? ? ? width:530px;
? ? ? ? height:480px;
? ? ? ? border:1px solid black;
? ? ? ? margin-left: 10px;
? ? ? ? margin-top: 10px;
? ? }
? ? .box tr td{
? ? ? ?padding:10px;
? ? }
? ? button{
? ? ? ?margin-left: 140px;
? ? ? ?margin-top: 20px;
? ? ? ?border:1px solid lightblue;
? ? ? ?font-size: 30px;
? ? ? ?color:white;
? ? ? ?background-color: hotpink;
? ? ? ?border-radius: 10%;
? ? ? ?height:60px;
? ? ? ?width:150px;
? ? }
? ? .person input{
? ? ? ? margin-left: 20px;
? ? }
? ? </style>
HTML代碼：
//用table來寫表單類的代碼，非常方便。內容不會隨著前面標簽類的文本內容而變化。
//如果用form寫的話，input后的框會隨著內容發生變化。
//input類型中的密碼類型，相比get，用post更安全，隱秘性更高。
//get輸入時，密碼會顯示在文本框里，而用post時，密碼為***。
<body>
? ? <span class="easy">網易</span><span class="cord">通行證</span>
? ? <div class="bigbox">
? ? <table class="box">
? ? <tbody>
? ? ? ? <tr>
? ? ? ? ? ? <td>通行證用戶名:</td>
? ? ? ? ? ? <td><input type="text" /id="name" οnblur="lose()" οnfοcus="get()"><span id="sone"></span></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>登錄密碼:</td>
? ? ? ? ? ? <td><input type="password" / method="post" id="password" οnblur="loseA()" οnfοcus="getA()"><span id="stwo"></span></td>? //onblur 失去焦點時的事件 onfocus得到焦點時的事件。插入到input標簽中，因為是為本需要的點擊事件。
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>重復登錄密碼:</td>
? ? ? ? ? ? <td><input type="password" / method="post" id="pass" οnblur="loseB()" οnfοcus="getB()"><span id="sthree"></span></td>
? ? ? ? </tr>
? ? ? ? <tr class="person">
? ? ? ? ? ? <td>性別:</td>
? ? ? ? ? ? <td><input type="radio" /name="sex" checked="checked">男<input type="radio" /name="sex">女</td>
//input標簽中性別的 name屬性 兩個name名要設置為同一個名字。否則，不能點擊單選。
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>真實姓名:</td>
? ? ? ? ? ? <td><input type="text" / id="real" οnblur=" loseC()" οnfοcus="loseC()"><span id="sfour"></span></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>昵稱:</td>
? ? ? ? ? ? <td><input type="text" /id="namer" οnblur="loseD()" οnfοcus="getD()" ><span id="sfive" ></span></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>關聯手機號:</td>
? ? ? ? ? ? <td><input type="text" /id="phone" ?οnblur="loseE()" οnfοcus="getE()"><span id="ssix"></span></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>保密郵箱:</td>
? ? ? ? ? ? <td><input type="text" / id="mail" οnblur="loseF()" οnfοcus="getF()"><span id="sseven" ></span></td>
? ? ? ? </tr>
? ? ? ? </tbody>
? ? </table>
? ? <button>注冊</button>
? ? </div>
</body>
JS代碼：
//使用函數function，判斷if...else來完成正則表達式驗證。
<script type="text/javascript">
? ? function get(){? ?//得到焦點時的事件，及得到焦點時，input框中的內容。
? ? ? ? sone.innerHTML = "請輸入正確的通行證用戶名"? //在span標簽中添加HTML內容
? ? }
? ? function lose(){? ?//失去焦點時的事件。
? ? ? ? if(name.value == ""){? ?//如果input框中的值是沒有填，則在span標簽中添加HTML內容。
? ? ? ? ? ? sone.innerHTML = "通行證名不能為空"
? ? ? ? }else{? ??
? ? ? ? ? ? var reg =/^[a-zA-Z0-9_-]{0,16}$/;? ?//驗證用戶名的正則表達式
? ? ? ? ? ? if(reg.test(name.value)!= false){? ?//使用正則驗證進行判斷
? ? ? ? ? ? ? ? sone.innerHTML = "格式不正確，請重新輸入"? //判斷完成在HTML中添加所需內容
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? sone.innerHTML = "格式正確";
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function getA(){
? ? ? ? stwo.innerHTML = "請輸入正確的登錄密碼"
? ? }
? ? function loseA(){
? ? ? ? if(password.value == ""){
? ? ? ? ? ? stwo.innerHTML = "密碼不能為空"
? ? ? ? }else{
? ? ? ? ? ? var reg = /^(\w){6,20}$/;
? ? ? ? ? ? if(reg.test(password.value)!=false){
? ? ? ? ? ? ? ? stwo.innerHTML = "格式不正確，請重新輸入"
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? stwo.innerHTML = "密碼正確"
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function getB(){
? ? ? ? sthree.innerHTML = "請再次確認密碼"
? ? }
? ? function loseB(){
? ? ? ? if(pass.value == ""){
? ? ? ? ? ? sthree.innerHTML = "密碼不能為空"
? ? ? ? }else{
? ? ? ? ? ? if(pass = password){
? ? ? ? ? ? ? ? sthree.innerHTML = "確認密碼正確";
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? sthree.innerHTML = "兩次輸入的密碼不同，請重新輸入"
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function getC(){
? ? ? ? sfour.innerHTML = "請輸入正確的真實姓名"
? ? }
? ? function loseC(){
? ? ? ? if(real.value == ""){
? ? ? ? ? ? sfour.innerHTML = "姓名不能為空"
? ? ? ? }else{
? ? ? ? ? ? var reg = /^[\u4e00-\u9fa5]{2,4}$/;
? ? ? ? ? ? if(reg.test(real.value)!=false){
? ? ? ? ? ? ? ? sfour.innerHTML = "姓名不正確，請重新輸入"
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? sfour.innerHTML = "您輸入的正確"
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function getD(){
? ? ? ? sfive.innerHTML = "請輸入正確的昵稱"
? ? }
? ? function loseD(){
? ? ? ? if(namer.value == ""){
? ? ? ? ? ? sfive.innerHTML = "昵稱不能為空";
? ? ? ? }else{
? ? ? ? ? ? var reg = /^[a-zA-Z0-9_-]{4,16}$/;
? ? ? ? ? ? if(reg.test(namer.value)!=false){
? ? ? ? ? ? ? ? sfive.innerHTML = "昵稱不正確，請重新輸入"
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? sfive.innerHTML = "您輸入的昵稱正確"
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function getE(){
? ? ? ? ssix.innerHTML = "請輸入正確的手機號"
? ? }
? ? function loseE(){
? ? ? ? if(phone.value == ""){
? ? ? ? ? ? ssix.innerHTML = "手機號不能為空";
? ? ? ? }else{
? ? ? ? ? ? var reg = /^1[34578][0-9]{9}$/;
? ? ? ? ? ? if(reg.test(phone.value)!=false){
? ? ? ? ? ? ? ? ssix.innerHTML = "手機號輸入錯誤，請重新輸入"
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ssix.innerHTML = "您輸入的手機號正確"
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function getF(){
? ? ? ? sseven.innerHTML = "請輸入正確的郵箱";
? ? }
? ? function loseF(){
? ? ? ? if(mail.value == ""){
? ? ? ? ? ? sseven.innerHTML = "郵箱不能為空";
? ? ? ? }else{
? ? ? ? ? ? var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
? ? ? ? ? ? if(reg.test(mail.value)!=false){
? ? ? ? ? ? ? ? sseven.innerHTML = "郵箱號輸入錯誤，請重新輸入"
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? sseven.innerHTML = "您輸入的郵箱正確";
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
</html>
總結
以上是生活随笔為你收集整理的使用正则表达式写网易通行证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： edius隐藏快捷键_EDIUS素材隐藏
- 下一篇： linux while read文件,l