初学者的jquery登录注册和弹窗设计

最新推荐文章于 2024-06-02 21:52:39 发布

weixin_34405332

最新推荐文章于 2024-06-02 21:52:39 发布

阅读量362

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/howie-yuan/p/5742525.html

版权

初次学习前端，接触到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="" οnsubmit="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("恭喜您成功注册");
        }

    });
});
最后注册成功

写的不好，望读者见谅，只想用此一步步记录自己的成长

转载于:https://www.cnblogs.com/howie-yuan/p/5742525.html

weixin_34405332

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初学者的jquery登录注册和弹窗设计

初次学习前端，接触到jquery，写了一个简单的注册账号，并判断输入内容是否符合命名规则的页面效果如下：首先创建html，js文件在做页面布局之前还要连接js文件，然后开始布局自己的页面效果if<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...
复制链接

扫一扫