用js设计一个注册页面（用js编写一个注册页面）

发布时间：2023-12-08

用js设计一个注册页面（用js编写一个注册页面）

更新：2022-11-16 07:14

本文目录一览：

  1. javascript 注册页面设计
  2. 如何用htmljavascript设计一个用户注册窗口？
  3. JavaScript+html设计一个用户注册页面
  4. JS写简单注册页面的问题
  5. 如何用jquery做一个注册页面
  6. 编写一个注册网页，求js文件

javascript 注册页面设计

纯JS完成？ 具体哪些功能？

页面1：

reg.html

<html>
<head>
<script>
function checkForm (obj) {
    var ele = obj.elements;
    for (var i = 0; i < ele.length; ++i) {
        var e = ele[i];
        if (e.name) {
            if (e.type == 'select-one') {
                if (e.options[e.selectedIndex].value == '') {
                    alert('请选择籍贯');
                    return false;
                } else {
                    continue;
                }
            } else if (e.type == 'select-multiple') {
                continue;
            } else if (e.type == 'checkbox' || e.type == 'radio') {
                var checkObj = document.getElementsByName(e.name);
                var check = false;
                for (var j = 0; j < checkObj.length; ++j) {
                    if (checkObj[j].checked) {
                        check = true;
                    }
                }
                if (!check) {
                    alert('请做出选择,性别或爱好');
                    return false;
                }
            } else if (e.type == 'button') {
                continue;
            } else if (e.type == 'hidden') {
                continue;
            } else if (typeof e.value != 'undefined' && e.value != '' && e.style.visibility != 'hidden') {
                continue;
            } else {
                alert('用户或密码,年龄为空');
                return false;
            }
        }
    }
    return true;
}
</script>
</head>
<body>
<form id="form1" method="get" action="reg_save.html" onsubmit="return checkForm(this)">
    <table width="343" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="43" colspan="2">注册</td>
        </tr>
        <tr>
            <td width="157" height="32">姓名：</td>
            <td width="186"><input type="text" name="username" id="username" /></td>
        </tr>
        <tr>
            <td width="157" height="32">密码：</td>
            <td width="186"><input type="password" name="passwd" id="passwd" /></td>
        </tr>
        <tr>
            <td height="37">年龄：</td>
            <td><input type="text" name="txtAge" id="textfield2"/></td>
        </tr>
        <tr>
            <td height="36">性别：</td>
            <td>
                <input name="sex" type="radio" id="sex1" value="男">男
                <input type="radio" name="sex" id="sex2" value="女">女
            </td>
        </tr>
        <tr>
            <td height="41">籍贯：</td>
            <td>
                <select name="jiguan" id="select">
                    <option value="">请选择</option>
                    <option value="广东">广东</option>
                    <option value="湖南">湖南</option>
                    <option value="广西">广西</option>
                    <option value="湖北">湖北</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                </select>
            </td>
        </tr>
        <tr>
            <td height="35">爱好： </td>
            <td>
                <input type="checkbox" name="hobby" id="hobby1" value="看书">看书
                <input name="hobby" type="checkbox" id="hobby2" value="上网">上网
                <input type="checkbox" name="hobby" id="hobby3" value="运动">运动
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="tijiao" id="tijiao" value="提交"/></td>
        </tr>
    </table>
</form>
</body>
</html>

页面2：

reg_save.html

<html>
<head>
</head>
<body>
<script>
var request = {
    QueryString : function(val) {
        var uri = window.location.search;
        var re = new RegExp("" +val+ "=([^\\?]*)", "ig");
        return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
    },
    QueryStrings : function() {
        var uri = window.location.search;
        var re = /\w*\=([^\\?]*)/ig;
        var retval=[];
        while ((arr = re.exec(uri)) != null)
            retval.push(arr[0]);
        return retval;
    }
}
var q = request.QueryStrings();
for (var i in q) {
    document.write(decodeURIComponent(q[i]) + '<br />');
}
</script>
</body>
</html>

如何用htmljavascript设计一个用户注册窗口？

详见代码。 具体代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/regist.css" rel="stylesheet" type="text/css">
<title>网上购物系统</title>
<script type="text/javascript">
var reg=/^[a-zA-Z]\w*$/;
var flag1=false,flag2=false,flag3=false;
function chang1(obj){
    var name=obj.value;
    if(name.length<3 || name.length>8){
        document.getElementById("usName").innerHTML="<font color='red'>用户名要求3-8位！</font>";
    } else if(!reg.test(name)){
        document.getElementById("usName").innerHTML="<font color='red'>用户名由字母开头，后字母、数字或下划线</font>";
        flag1=false;
    }
}
</script>
</head>
<body>
</body>
</html>

JavaScript+html设计一个用户注册页面

var reg=/^[a-zA-Z]\w*$/; 
var flag1=false,flag2=false,flag3=false; 
function chang1(obj){
    var name=obj.value; 
    if(name.length<3 || name.length>8){
        document.getElementById("usName").innerHTML="用户名要求3-8位！"; 
    } else if(!reg.test(name)){
        document.getElementById("usName").innerHTML="用户名由字母开头，后字母、数字或下划线"; 
        flag1=false;
    }
}

JS写简单注册页面的问题

用innerHTML属性更改文本，以密码后面为例。节点可能会找错，我找的是font标签

var ofont = document.getElementsByTagName("font")[0];
ofont.innerHTML = "不能为空";

这样font中的文字就会被更改了。

如何用jquery做一个注册页面

首先，jquery 是一个js 的框架或插件，如果要做页面的话，是需要：html + css + js(jquery)的。单独用jquery做注册是不科学的。 可以先用html画结构，然后加上css美化一下，用jquery做点击提交和校验操作。

编写一个注册网页，求js文件

很简单！我这里只说说大体思路，所提供的JS代码可以根据需要扩展，也可以直接拿来用！ 思路： 在表单（Form)中，注册页面用的最常见的就是Input控件，我们可以利用W3C为我们提供的HTML DOM对象，通过JS函数（或方法）来实现对表单控件是否为空的判断。 实现： 在一个页面中，具有相同标签的表单控件会被浏览器看作一个以数字为下标的标签数组，例如：在你设计的表单中有8个文本框，访问它们时的数字下标就是0-7，我们通过一个简单的For循环，来测试8个文本框是否为空，然后决定是否可以跳转到下一个页面。

代码：

<script type="text/javascript">
function checkInput(){
    var In=document.getElementsByTagName("input");
    for(var i=0; i<In.length; i++){
        if(In[i].type=="text" && In[i].value==""){
            alert("表单没有填完整，请检查！");
            return;
        }
        if(In[i].type=="password" && In[i].value==""){
            alert("表单没有填完整，请检查！");
            return;
        }
    }
}
</script>

*把以上代码嵌入到<head></head>之间，然后在<form>标签中加入onsubmit="checkInput()"或者在<input type="submit">中插入onclick="checkInput()"均可实现对文本框、密码框判断是否为空的功能。

推荐文章