jQuery 기초 지식--Form 기초(계속)
45750 단어 jquery
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
</head>
<body>
<div class="centent">
<select multiple id="select1" style="width: 100px; height: 160px;">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5"> 5</option>
<option value="6"> 6</option>
<option value="7"> 7</option>
<option value="8"> 8</option>
</select>
<div>
<span id="add"> >></span>
<span id="add_all"> >></span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width: 100px; height: 160px;">
</select>
<div>
<span id="remove"><< </span>
<span id="remove_all"><< </span>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
// // 1
// var $options = $('#select1 option:selected');
// var $remove = $options.remove();
// $remove.appendTo('#select2');
// 2
var $options = $('#select1 option:selected');
$options.appendTo('#select2');
});
$("#add_all").click(function () {
var $options = $("#select1 option");
$options.appendTo("#select2");
});
$("#select1").dblclick(function () {
var $options = $('#select1 option:selected');
$options.appendTo('#select2');
});
$("#remove").click(function () {
var $options = $("#select2 option:selected");
$options.appendTo("#select1");
});
$("#remove_all").click(function () {
var $options = $("#select2 option");
$options.appendTo("#select1");
});
$("#select2").dblclick(function () {
var $options = $("#select2 option:selected");
$options.appendTo("#select1");
});
})
</script>
</html>
양식 유효성 검사
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username"> :</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email"> :</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo"> :</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value=" " id="send" /><input type="reset" id="res" />
</div>
</form>
</body>
<script type="text/javascript">
$(function () {
//
$("form :input.required").each(function () {
$(this).parent().append("<strong class='high'>*</strong>");
});
//
$("form :input").blur(function () {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
// username
if($(this).is("#username")) {
if(this.value == "" || this.value.length < 6) {
var errorMsg = " 6 .";
$parent.append("<span class='formtips onError'>" + errorMsg + "</span>")
} else {
var okMsg = " ";
$parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>")
}
}
// email
if($(this).is("#email")) {
if(this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ) {
var errorMsg = " E-Mail ";
$parent.append("<span class='formtips onError'>" + errorMsg + "</span>")
} else {
var okMsg = " ";
$parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>")
}
}
}).keyup(function () {//
$(this).triggerHandler("blur");
}).focus(function () {
$(this).triggerHandler("blur");
});
// --
$("#send").click(function () {
$("form .required:input").trigger("blur");
var numErr = $("form .onError").length;
if(numErr) {
return false;
}
alert(" !");
});
})
</script>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.