JavaScript中Form表單技術(shù)匯總(推薦)
更新時(shí)間：2016年06月26日 14:20:03 作者：諳憶為你蒼
這篇文章主要介紹了JavaScript中Form表單技術(shù)的相關(guān)資料,包括簡(jiǎn)單的表單驗(yàn)證和正則表達(dá)式驗(yàn)證，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
這里不進(jìn)行很復(fù)雜的后臺(tái)驗(yàn)證以及JavaScript的正則表達(dá)式，只是簡(jiǎn)單的介紹下這個(gè)技術(shù)，簡(jiǎn)單的后臺(tái)接收與跳轉(zhuǎn)，大概了解怎么驗(yàn)證的就可以。具體的技術(shù)，我后面還會(huì)繼續(xù)寫博客的。本人也還在學(xué)習(xí)中。
表單驗(yàn)證1-簡(jiǎn)單驗(yàn)證
進(jìn)行簡(jiǎn)單的驗(yàn)證，用戶名必須為abcd，密碼長(zhǎng)度必須大于等于6
然后根據(jù)用戶輸入的數(shù)據(jù)，在后面給出提示。
代碼演示：
<html>
<head>
<title>DHTML技術(shù)演示---表單驗(yàn)證</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script>
function checkUserName(){
//alert("aa");//測(cè)試這個(gè)失去焦點(diǎn)監(jiān)聽(tīng)是否管用
var oUserNameNode = document.getElementsByName("userName")[0];
var name = oUserNameNode.value;//這個(gè)type="text"的value的值是方框內(nèi)的字符
//以后有后臺(tái)時(shí)，“abcd”這個(gè)數(shù)據(jù)應(yīng)該通過(guò)ajax技術(shù)向后臺(tái)要
//這里我們只是做簡(jiǎn)單的演示-就是填寫的name必須是abcd
if(name=="abcd"){
document.getElementById("userNameSpan").innerHTML="用戶名正確".fontcolor("green");
}else{
document.getElementById("userNameSpan").innerHTML="用戶名錯(cuò)誤".fontcolor("red");
}
}
function checkPwd(){
var oUserPwdNode = document.getElementById("pwd")[0];
var pwd=oUserPwdNode.value;
if(pwd.length>=6){
document.getElementById("userPwdSpan").innerHTML="密碼格式符合要求".fontcolor("green");
}else{
document.getElementById("userPwdSpan").innerHTML="密碼長(zhǎng)度必須大于等于6".fontcolor("red");
}
}
</script>
</head>
<body>
<form>
<!--onblur 在對(duì)象失去輸入焦點(diǎn)時(shí)觸發(fā)。 -->
用戶名:<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
<br/>
<br/>
<!--為了演示清楚，密碼這里也用type="text"了，其實(shí)應(yīng)該用type="password"的-->
密碼:<input type="text" name="pwd" onblur="checkPwd()" />
<span id="userPwdSpan"></span>
</form>
</body>
</html>
360瀏覽器8.1 演示結(jié)果：
用戶名不符合規(guī)則：
密碼不符合規(guī)則：
注冊(cè)表單的驗(yàn)證2-正則表達(dá)式
代碼演示：
<html>
<head>
<title>DHTML技術(shù)演示---注冊(cè)表單的驗(yàn)證--js中使用正則表達(dá)式</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkUserName(){
var oUserNameNode = document.getElementsByName("userName")[0];
var userName = oUserNameNode.value;
//用正則檢驗(yàn)
var reg = new RegExp("[a-z]{4}", "i");//包含4個(gè)連續(xù)的字母就可以，注意"i"的雙引號(hào)不能省略
//i---表示忽略大小寫
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4個(gè)連續(xù)的字母,注意"i"中的雙引號(hào)不能省略
//^代表開始 $代表結(jié)束
var oUserNameSpan = document.getElementById("userNameSpan");
//alert(reg.test(userName));
if (reg.test(userName)) {
oUserNameSpan.innerHTML = "用戶名格式正確".fontcolor("green");
}
else {
oUserNameSpan.innerHTML = "用戶名格式錯(cuò)誤".fontcolor("red");
}
}
</script>
</head>
<body>
<!-- 演示JS中正則表達(dá)式的用法 -->
<script type="text/javascript">
//var reg = /^[0-9]{6}$/ ; //法一
var reg = new RegExp("^[0-9]{6}$");//法二
var str = "123456";
var bRes = reg.test(str);
//111使用正則表達(dá)式對(duì)象中的方法進(jìn)行驗(yàn)證---只能用于判斷是否匹配，功能類似于Java中的String類中的matches()方法
//alert(bRes);//true
//222使用String對(duì)象中的方法進(jìn)行正則檢驗(yàn)---功能更強(qiáng)大，類似于Java當(dāng)中的Matcher工具
var res = str.match(reg);//匹配的結(jié)果保存在res(是一個(gè)數(shù)組)中，如果沒(méi)有匹配到則res為null。
//alert(res);//123456
//match方法返回的數(shù)組有三個(gè)屬性：input、index和lastIndex。
//★一點(diǎn)細(xì)節(jié)---使用new RegExp()方式時(shí)，特殊字符要轉(zhuǎn)義
//var reg2 =/^\d{6}$/; //"\"不需要轉(zhuǎn)義
var reg2= new RegExp("^\d{6}$");//※※※注意"\"要轉(zhuǎn)義
//▲▲▲上面那句是錯(cuò)誤的，必須要寫成：new RegExp("^\\d{6}$")
//alert( reg2.test("123456") );
</script>
<form>
<!--onblur 在對(duì)象失去輸入焦點(diǎn)時(shí)觸發(fā)。 -->
用戶名:<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
</form>
</body>
</html>
360瀏覽器8.1 演示結(jié)果：
只需要包含連續(xù)4個(gè)字母就可以了。
注冊(cè)表單的驗(yàn)證且控制提交–前端校驗(yàn):
代碼文件創(chuàng)建位置：
代碼演示：
3form3.html
<html>
<head>
<title>DHTML技術(shù)演示---注冊(cè)表單的驗(yàn)證且控制提交--前端校驗(yàn)</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkUserName(){
var oUserNameNode = document.getElementsByName("userName")[0];
var userName = oUserNameNode.value;
//用正則檢驗(yàn)
var reg = new RegExp("[a-z]{4}","i");//包含4個(gè)連續(xù)的字母就可以，注意"i"的雙引號(hào)不能省略
//i---表示忽略大小寫
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4個(gè)連續(xù)的字母,注意"i"中的雙引號(hào)不能省略
//^代表開始 $代表結(jié)束
var oUserNameSpan = document.getElementById("userNameSpan");
if(reg.test(userName)){
oUserNameSpan.innerHTML="用戶名格式正確".fontcolor("green");
return true;
}else{
oUserNameSpan.innerHTML="用戶名格式錯(cuò)誤".fontcolor("red");
return false;
}
}
function checkPwd(){
var oUserPwdNode = document.getElementsByName("pwd")[0];
var pwd = oUserPwdNode.value;
var reg2 = new RegExp("^[\\w\\d]{6,9}$");
if(reg2.test(pwd)){
document.getElementById("userPwdSpan").innerHTML="密碼格式符合要求".fontcolor("green");
return true;
}else{
document.getElementById("userPwdSpan").innerHTML="密碼長(zhǎng)度必須是6-9位的數(shù)字字母或下劃線".fontcolor("red");
return false;
}
}
function checkUser(){
if(checkUserName() && checkPwd() ){//如果還有其他項(xiàng)需要在提交前驗(yàn)證，直接把那個(gè)驗(yàn)證函數(shù)寫這里就行
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<!--通過(guò)注冊(cè)onsubmit事件響應(yīng)來(lái)控制表單的提交，如果return false則不會(huì)提交，而return true則會(huì)提交。如果不注冊(cè)onsubmit事件即是return true
onsubmit 當(dāng)表單將要被提交時(shí)觸發(fā)。
<form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return true;">
-->
<form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
用戶名：<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
<!--為了演示清楚，密碼這里也用type="text"了，其實(shí)應(yīng)該用type="password"的-->
密碼：<input type="text" name="pwd" onblur="checkPwd()" />
<span id="userPwdSpan"></span>
<br/>
<input type="submit" value="注冊(cè)"/>
</form>
<hr/>
<!--表單提交方式2---自己寫個(gè)按鈕來(lái)代替form自帶的提交按鈕-->
<form id="userinfo" action="/dhtmlProj/servlet/RegServlet" >
用戶名:<input type="text" name="userName" onBlur="checkUserName2()"/>
<span id="userNameSpan2"></span><br/>
密碼:<input type="text" name="pwd" onBlur="checkPwd2()"/>
<span id="userPwdSpan2"></span>
<br/>
</form>
<input type="button" value="注冊(cè)" onclick="mySubmit()" />
<script type="text/javascript">
function mySubmit(){
var oFormNode = document.getElementById("userinfo");
if(checkUserName2()&&checkPwd2()){
oFormNode.submit();//submit 提交表單。
}
}
function checkUserName2(){
var oUserNameNode = document.getElementsByName("userName")[1];
var userName = oUserNameNode.value;
//用正則檢驗(yàn)
var reg = new RegExp("[a-z]{4}","i");//包含4個(gè)連續(xù)的字母就可以，注意"i"的雙引號(hào)不能省略
//i---表示忽略大小寫
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4個(gè)連續(xù)的字母,注意"i"中的雙引號(hào)不能省略
//^代表開始 $代表結(jié)束
var oUserNameSpan = document.getElementById("userNameSpan2");
if(reg.test(userName)){
oUserNameSpan.innerHTML="用戶名格式正確".fontcolor("green");
return true;
}else{
oUserNameSpan.innerHTML="用戶名格式錯(cuò)誤".fontcolor("red");
return false;
}
}
function checkPwd2(){
var oUserPwdNode = document.getElementsByName("pwd")[1];
var pwd = oUserPwdNode.value;
var reg2 = new RegExp("^[\\w\\d]{6,9}$");
if(reg2.test(pwd)){
document.getElementById("userPwdSpan2").innerHTML="密碼格式符合要求".fontcolor("green");
return true;
}else{
document.getElementById("userPwdSpan2").innerHTML="密碼長(zhǎng)度必須是6-9位的數(shù)字字母或下劃線".fontcolor("red");
return false;
}
}
</script>
</body>
</html>
show.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>這是注冊(cè)后的顯示頁(yè)面</title>
</head>
<body>
<%
out.println(request.getAttribute("uName"));
out.println(request.getAttribute("pwd"));
%>
<%
for(int i=0;i<3;i++){
//這個(gè)下面可以寫html代碼
%>
<div>歡迎</div>
<%
//這個(gè)上面可以寫html代碼
}
%>
</body>
</html>
RegServlet.Java
這個(gè)是new一個(gè)Servlet。
會(huì)自動(dòng)給我們配好web.xml
package cn.hncu.user;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//設(shè)置編碼
String name = request.getParameter("userName");//userName為提交過(guò)來(lái)的表單中的一個(gè)input的name屬性
String pwd = request.getParameter("pwd");
//System.out.println(name);
request.setAttribute("uName", "hncu---"+name);
request.setAttribute("pwd", "pwd---"+pwd);
request.getRequestDispatcher("/dhtml/6formsubmit/jsps/show.jsp").forward(request, response);
//輸出，導(dǎo)向另外的頁(yè)面顯示
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name></display-name> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>RegServlet</servlet-name> <servlet-class>cn.hncu.user.RegServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>RegServlet</servlet-name> <url-pattern>/servlet/RegServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
360瀏覽器8.1 演示圖片：
當(dāng)格式都填寫正確時(shí)，點(diǎn)注冊(cè)按鈕，自動(dòng)跳轉(zhuǎn)到另外的頁(yè)面。
有一個(gè)格式錯(cuò)誤時(shí)，點(diǎn)注冊(cè)按鈕不會(huì)有反應(yīng)的。
注冊(cè)表單的驗(yàn)證且控制提交–前端校驗(yàn)–最終版本:
代碼演示：
<html>
<head>
<title>DHTML技術(shù)演示---注冊(cè)表單的驗(yàn)證且控制提交--前端校驗(yàn)--最終版本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function check(name,reg,spanId,okInfo,errInfo){
var value = document.getElementsByName(name)[0].value;
//用正則檢驗(yàn)
var oSpanNode = document.getElementById(spanId);
if(reg.test(value)){
oSpanNode.innerHTML=okInfo.fontcolor("green");
return true;
}else{
oSpanNode.innerHTML=errInfo.fontcolor("red");
return false;
}
}
function checkUserName(){
var reg = new RegExp("[a-z]{4}","i");//包含4個(gè)連續(xù)的字母,注意"i"中的雙引號(hào)不能省略
return check("userName",reg,"userNameSpan","用戶名格式正確","用戶名格式錯(cuò)誤");
}
function checkPwd(){
var reg = new RegExp("^[\\w\\d]{6,9}$");
return check("pwd",reg,"userPwdSpan","密碼格式符合要求","密碼長(zhǎng)度必須是6-9位的數(shù)字字母或下劃線");
}
function checkPwd2(){
var flag;
var pwd = document.getElementsByName("pwd")[0].value;
var pwd2 = document.getElementsByName("pwd2")[0].value;
var oSpanNode = document.getElementById("userPwd2Span");
if(pwd==pwd2){
oSpanNode.innerHTML="兩次密碼一致".fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML="兩次密碼不一致".fontcolor("red");
flag = false;
}
return flag;
}
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"userMailSpan","郵箱格式正確","郵箱格式不正確");
}
function checkUser(){//控制表單的提交
if(checkUserName() && checkPwd() && checkPwd2() && checkMail() ){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
用戶名：<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
<br/>
輸入密碼：<input type="text" name="pwd" onblur="checkPwd()" />
<span id="userPwdSpan"></span>
<br/>
確認(rèn)密碼：<input type="text" name="pwd2" onBlur="checkPwd2()"/>
<span id="userPwd2Span"></span>
<br/>
郵件地址：<input type="text" name="mail" onblur="checkMail()" />
<span id="userMailSpan"></span>
<br/>
<input type="submit" value="注冊(cè)">
</form>
</body>
</html>
360瀏覽器8.1 演示結(jié)果：
只有全部格式填寫正確后再點(diǎn)注冊(cè)按鈕才會(huì)有響應(yīng)。
全部格式填寫正確后，點(diǎn)注冊(cè)按鈕后的頁(yè)面，其實(shí)就是跳到show.jsp頁(yè)面了。（自己可以隨便定位到哪的）
以上所述是小編給大家介紹的JavaScript中Form表單技術(shù)匯總(推薦)的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
js字符串的各種格式的轉(zhuǎn)換 ToString，F(xiàn)ormat
平時(shí)我們經(jīng)常會(huì)需要將字符轉(zhuǎn)換為各種不同的格式，例如錢：0元需要轉(zhuǎn)換為0.00顯示；需要轉(zhuǎn)換為16進(jìn)制顯示的數(shù)，這樣的例子有很多2011-08-08
這篇文章主要介紹了JS數(shù)組的高級(jí)使用方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組的增刪改查、排序、隨機(jī)數(shù)等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JSONP和批量操作功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
關(guān)于BootstrapTable 導(dǎo)出數(shù)據(jù)的問(wèn)題最終解決方案
這篇文章主要介紹了BootstrapTable 導(dǎo)出數(shù)據(jù)的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部示例代碼
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
通過(guò)滑動(dòng)翻頁(yè)效果實(shí)現(xiàn)和移動(dòng)端click事件問(wèn)題
這篇文章主要介紹了滑動(dòng)翻頁(yè)效果實(shí)現(xiàn)和移動(dòng)端click事件問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)效果，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-07-07
BootStrap Fileinput初始化時(shí)的一些參數(shù)
本文通過(guò)一個(gè)例子給大家簡(jiǎn)單介紹了bootstrap fileinput初始化時(shí)的一些參數(shù)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-12-12
JavaScript創(chuàng)建對(duì)象的四種常用模式實(shí)例分析
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的四種常用模式,結(jié)合實(shí)例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動(dòng)態(tài)原型模式創(chuàng)建對(duì)象的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01