国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > js代码独立于jsp或者html,js内嵌在jsp或者html。代码示例

js代码独立于jsp或者html,js内嵌在jsp或者html。代码示例

来源:程序员人生   发布时间:2015-01-18 10:16:40 阅读次数:3174次

文件目录结构


JavaScript内置于jsp示例代码

<%@ page language="java"import="java.util.*" pageEncoding="GBK"%>

<html>

  <head>

   <title>My JSP'zhuceqian.jsp' starting page</title>

 <!--  会显示弹出“输入不能为空”对话框 -->

 <script type="text/javascript">

 function Check_string_length(){

    //var username=document.getElementById("RegistUserName");

    //var username_length=username.length();

    alert("输入不能为空!");

    return false;

   

}

 </script>

   </head>

 

   <body  bgcolor="c0ffc0">

<table>

     <tr  align="center">

     <td>

     <p>&nbsp;&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;</p>

<!―在表单提交前会先履行js代码 Check_string_length()

在表单的onsubmit中,1定要加return,而且在js函数中要返回false判断

这样就能够实现:在提交表单后,先进行js验证,验证通过后跳转到action指定的文件

验证失败则弹出提示对话框,然后继续填写表单

 -->

    <form action="zhuce.jsp" method="post"name="formzhuce" onsubmit="returnCheck_string_length()">

        <p>

            <lable>用户名&nbsp;&nbsp;<font color="red">*</font></lable><input type="text"name="username" id="RegistUserName"/>

        </p>

        <p>

            <lable>密码&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">*</font></lable><input type="password"name="password"/>

        </p>

        <p>

            <lable>确认密码<font color="red">*</font></lable><input type="password" name="repeat_password"/>

        </p>

        <p>

       

        <input type="submit"name="tj" value="注册" />

    </form>

    </td></tr></table>

  </body>

</html>

 

 

 

 

 

Js独立于jsp或html文件

RegistTest.jsp

<%@ page language="java"import="java.util.*" pageEncoding="GBK"%>

<html>

  <head>

   <title>My JSP'zhuceqian.jsp' starting page</title>

<script src="JS/CheckRegist.js"></script>

<!-- 

 <script type="text/javascript">

 function Check_string_length(){

    var username=document.getElementById("RegistUserName");

    //var username_length=username.length();

    alert("输入不能为空!");

    return false;

   

}

 </script>

-->

   </head>

 

    <body  bgcolor="c0ffc0">

 

  <%

    request.setCharacterEncoding("GBK");

    response.setCharacterEncoding("GBK");

   

   %>

   <table  align="center"  border='0'>

    <tr><td><img width="800"height="200" src="source1/1.jpg"/> </td></tr>

    </table>

    <table width="800"  align="center"border=1 height="40"bordercolor="c0ff00" bgcolor="ffffff">

    <tr><td width="200"  align="center"><a href="index.jsp">首页</a></td><td width="200" align="center"><a href="er_shou_shu.jsp">2手书</a></td><td width="200"  align="center"><a href="liu_yan_ban.jsp">留言板</a></td><td width="200"align="center"><a href="lian_xi_wo_men.jsp">联系我们</a></td></tr>

   </table>   

     <table align="center"  width="800"height="450" border='0' background="source1/3.jpg">

     <tr  align="center">

     <td>

     <p>&nbsp;&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;</p>

    <form action="zhuce.jsp" method="post"name="formzhuce" onsubmit="returnCheck_string_length()">

        <p>

            <lable>用户名&nbsp;&nbsp;<font color="red">*</font></lable><input type="text"name="username" id="RegistUserName"/>

        </p>

        <p>

            <lable>密码&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">*</font></lable><input type="password"name="password"/>

        </p>

        <p>

            <lable>确认密码<font color="red">*</font></lable><input type="password" name="repeat_password"/>

        </p>

        <p>

            <lable>真实姓名<font color="red">*</font></lable><input type="text" name="real_name"/>

        </p>

        <p>

            <lable>性别&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">*</font></lable><input type="text"name="sex"/>

        </p>

        <p>

            <lable>年龄&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">*</font></lable><input type="text"name="age"/>

        </p>

        <p>

            <lable>联系方式<font color="red">*</font></lable><input type="text" name="contact"/>

        </p>

        <p>

            <lable>地址&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">*</font></lable><input type="text"name="address"/>

        </p>

        <p>

            <lable>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<font color="red">*</font>为必填项)</lable>

        </p>

        <p>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="tj"value="注册" />

        </p>

    </form>

    </td></tr></table>

  </body>

</html>

下面是CheckRegist.js的源代码

function Check_string_length(){

    //var username=document.getElementById("RegistUserName");

    //varusername_length=username.length();

    //if(username_length<=3){

    alert("用户名不能为空!!消息来自js文件");

    return false;

    //}

}

 

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生