初次学习前端，接触到jquery，写了一个简单的注册账号，
并判断输入内容是否符合命名规则的页面效果如下：
首先创建html，js文件
在做页面布局之前还要连接js文件，然后开始布局自己的页面效果
if<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手机注册</title>
<script src="js/jquery.js"></script> <script src="js/jquerytest.js"></script></head><body>
<form name=‘myform‘ method=‘post‘ action="" onsubmit="check()"> 手机: <input name=‘phone‘ type="phone" id="phone"> <span id=phone_error></span><br /> 密码: <input name=‘password‘ id="password" placeholder="密码长度必须大于等于6位" type="password"> <span id="pw_error"></span><br /> <input type="button" value="注册" id="register"/>
</form>
</body></html>在完成了布局之后，要为注册的button添加事件，在这里要做出判断，使用if条件语句判断是否符合规则，效果如下：
$(document).ready(function() { $("#register").click(function() { var tel=$("#phone").val(); var pw=$("#password").val(); $("#phone_error").css({"color":"black"}); $("#pw_error").css({"color":"black"});
if(tel==""){ $("#phone_error").html("<b>手机不能为空</b>"); }else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(tel))){ $("#phone_error").html("<b>手机号码不符合规则</b>"); }else{ $("#phone_error").text(""); } if(pw==""){ $("#pw_error").html("<b>密码不能为空</b>"); } else if(pw.length<6){ $("#pw_error").html("<b>密码不符合规则</b>"); }else{ $("#pw_error").text(""); } if((/^1[3|4|5|8][0-9]\d{4,8}$/.test(tel))&&pw.length>=6 ){ alert("恭喜您成功注册"); }
});});最后注册成功
写的不好，望读者见谅，只想用此一步步记录自己的成长
时间： 2024-10-11 17:31:45