JavaScript中Form表單技術(shù)匯總(推薦)
更新時(shí)間：2016年06月26日 14:20:03 作者：諳憶為你蒼
這篇文章主要介紹了JavaScript中Form表單技術(shù)的相關(guān)資料,包括簡單的表單驗(yàn)證和正則表達(dá)式驗(yàn)證，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
這里不進(jìn)行很復(fù)雜的后臺驗(yàn)證以及JavaScript的正則表達(dá)式，只是簡單的介紹下這個(gè)技術(shù)，簡單的后臺接收與跳轉(zhuǎn)，大概了解怎么驗(yàn)證的就可以。具體的技術(shù)，我后面還會繼續(xù)寫博客的。本人也還在學(xué)習(xí)中。
表單驗(yàn)證1-簡單驗(yàn)證
進(jìn)行簡單的驗(yàn)證，用戶名必須為abcd，密碼長度必須大于等于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");//測試這個(gè)失去焦點(diǎn)監(jiān)聽是否管用
var oUserNameNode = document.getElementsByName("userName")[0];
var name = oUserNameNode.value;//這個(gè)type="text"的value的值是方框內(nèi)的字符
//以后有后臺時(shí)，“abcd”這個(gè)數(shù)據(jù)應(yīng)該通過ajax技術(shù)向后臺要
//這里我們只是做簡單的演示-就是填寫的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="密碼長度必須大于等于6".fontcolor("red");
}
}
</script>
</head>
<body>
<form>
<!--onblur 在對象失去輸入焦點(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ī)則：
注冊表單的驗(yàn)證2-正則表達(dá)式
代碼演示：
<html>
<head>
<title>DHTML技術(shù)演示---注冊表單的驗(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"的雙引號不能省略
//i---表示忽略大小寫
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4個(gè)連續(xù)的字母,注意"i"中的雙引號不能省略
//^代表開始 $代表結(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á)式對象中的方法進(jìn)行驗(yàn)證---只能用于判斷是否匹配，功能類似于Java中的String類中的matches()方法
//alert(bRes);//true
//222使用String對象中的方法進(jìn)行正則檢驗(yàn)---功能更強(qiáng)大，類似于Java當(dāng)中的Matcher工具
var res = str.match(reg);//匹配的結(jié)果保存在res(是一個(gè)數(shù)組)中，如果沒有匹配到則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 在對象失去輸入焦點(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è)字母就可以了。
注冊表單的驗(yàn)證且控制提交–前端校驗(yàn):
代碼文件創(chuàng)建位置：
代碼演示：
3form3.html
<html>
<head>
<title>DHTML技術(shù)演示---注冊表單的驗(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"的雙引號不能省略
//i---表示忽略大小寫
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4個(gè)連續(xù)的字母,注意"i"中的雙引號不能省略
//^代表開始 $代表結(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="密碼長度必須是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>
<!--通過注冊onsubmit事件響應(yīng)來控制表單的提交，如果return false則不會提交，而return true則會提交。如果不注冊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="注冊"/>
</form>
<hr/>
<!--表單提交方式2---自己寫個(gè)按鈕來代替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="注冊" 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"的雙引號不能省略
//i---表示忽略大小寫
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4個(gè)連續(xù)的字母,注意"i"中的雙引號不能省略
//^代表開始 $代表結(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="密碼長度必須是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>這是注冊后的顯示頁面</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。
會自動(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為提交過來的表單中的一個(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)向另外的頁面顯示
}
}
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)注冊按鈕，自動(dòng)跳轉(zhuǎn)到另外的頁面。
有一個(gè)格式錯(cuò)誤時(shí)，點(diǎn)注冊按鈕不會有反應(yīng)的。
注冊表單的驗(yàn)證且控制提交–前端校驗(yàn)–最終版本:
代碼演示：
<html>
<head>
<title>DHTML技術(shù)演示---注冊表單的驗(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"中的雙引號不能省略
return check("userName",reg,"userNameSpan","用戶名格式正確","用戶名格式錯(cuò)誤");
}
function checkPwd(){
var reg = new RegExp("^[\\w\\d]{6,9}$");
return check("pwd",reg,"userPwdSpan","密碼格式符合要求","密碼長度必須是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="注冊">
</form>
</body>
</html>
360瀏覽器8.1 演示結(jié)果：
只有全部格式填寫正確后再點(diǎn)注冊按鈕才會有響應(yīng)。
全部格式填寫正確后，點(diǎn)注冊按鈕后的頁面，其實(shí)就是跳到show.jsp頁面了。（自己可以隨便定位到哪的）
以上所述是小編給大家介紹的JavaScript中Form表單技術(shù)匯總(推薦)的相關(guān)知識，希望對大家有所幫助，如果大家有疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
相關(guān)文章
bootstrap多層模態(tài)框滾動(dòng)條消失的問題
本篇文章主要介紹了bootstrap多層模態(tài)框滾動(dòng)條消失的問題，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
近來無聊，翻出來大學(xué)時(shí)候的數(shù)據(jù)結(jié)構(gòu)教材來看。突然想起，大學(xué)時(shí)候就想過用js實(shí)現(xiàn)基本的排序算法的事情，反正閑來無事，便寫出來后記錄于此2012-08-08
DropDownList控件綁定數(shù)據(jù)源的三種方法
本文給大家分享web 中 DropDownList綁定數(shù)據(jù)源的幾種方式以及DropdownList控件動(dòng)態(tài)綁定數(shù)據(jù)源的兩種方法，下面通過本文給大家詳細(xì)介紹，感興趣的朋友一起看看2016-12-12
Js實(shí)現(xiàn)表格隔行換色一例，這種效果網(wǎng)上已經(jīng)有很多啦，每一種都有特色，請大家選擇使用。2009-11-11
在layui.use 中自定義 function 的正確方法
今天小編就為大家分享一篇在layui.use 中自定義 function 的正確方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
jQuery右下角旋轉(zhuǎn)環(huán)狀菜單特效代碼
jquery實(shí)現(xiàn)右下角旋轉(zhuǎn)環(huán)形菜單特效代碼，是固定在頁面右下角位置，當(dāng)用戶點(diǎn)擊了主菜單按鈕后，子菜單項(xiàng)會以環(huán)狀旋轉(zhuǎn)進(jìn)入頁面，并使用animate.css制作動(dòng)畫效果，有需要的朋友可以參考下2015-08-08
淺析js設(shè)置控件的readonly與enabled屬性問題
本篇文章是對js設(shè)置控件的readonly與enabled屬性問題進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
程序中很多數(shù)據(jù)是動(dòng)態(tài)拼接而成的json數(shù)據(jù)，最近在用json的時(shí)候老是現(xiàn)JSON.parse錯(cuò)誤2010-07-07
這篇文章主要給大家介紹了關(guān)于uni-app中Navigator組件的用法詳解及傳參方式的相關(guān)資料,在實(shí)際應(yīng)用開發(fā)中我們經(jīng)常要使用到路由跳轉(zhuǎn),在uniapp官網(wǎng)中提供了navigator內(nèi)置組件,供我們使用,需要的朋友可以參考下2023-09-09
JavaScript常考手寫題之柯里化與數(shù)組扁平化的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript?？际謱戭}中柯里化與數(shù)組扁平化、數(shù)組去重的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12