澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:字段类型,必需字段

转自: http://www.maomao365.com/?p=4983

ajax来自动补全表单字段示例,ajax补全字段示例

源代码:

脚本一:

<!DOCTYPE html>
<html>
<head>
<title>Auto-fill Form Fields</title>
<link rel="stylesheet"href="script06.css" rel="external nofollow" >
<script src="script06.js"></script>
</head>
<body>
<form action="#">
Please enter your state:<br>
<input type="text" id="searchField" autocomplete="off"><br>
<div id="popups"> </div>
</form>
</body>
</html>

脚本二:

body, #searchfield {
font: 1.2em arial, helvetica,sans-serif;
}
.suggestions {
background-color: #FFF;
padding: 2px 6px;
border: 1px solid #000;
}
.suggestions:hover {
background-color: #69F;
}
#popups {
position: absolute;
}
#searchField.error {
background-color: #FFC;
}

脚本三:

window.onload = initAll;
var xhr = false;
var statesArray = new Array();
function initAll() {
document.getElementById("searchField").onkeyup = searchSuggest;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = setStatesArray;
xhr.open("GET", "us-states.xml",true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn't create an XMLHttpRequest");
}
}
function setStatesArray() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i  ) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
}
else {
alert("There was a problem with the request "   xhr.status);
}
}
}
function searchSuggest() {
var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
if (str != "") {
document.getElementById("popups").innerHTML = "";
for (var i=0; i<statesArray.length;i  ) {
var thisState = statesArray[i].nodeValue;
if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
var tempDiv = document.createElement("div");
tempDiv.innerHTML = thisState;
tempDiv.onclick = makeChoice;
tempDiv.className = "suggestions";
document.getElementById("popups").appendChild(tempDiv);
}

}
var foundCt = document.getElementById("popups").childNodes.length;
if (foundCt == 0) {
document.getElementById("searchField").className ="error";
}
if (foundCt == 1) {
document.getElementById("searchField").value = document.getElementById("popups").
firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
}
}
}
function makeChoice(evt) {
if (evt) {
var thisDiv = evt.target;
}
else {
var thisDiv = window.event.srcElement;
}
document.getElementById("searchField").value = thisDiv.innerHTML;
document.getElementById("popups").innerHTML = "";
}

深入分析如下:

  1. Please enter your state:<br>
    <input type="text"id="searchField" autocomplete="off"><br>
    <div id="popups"> </div>
    那是我们要注意的HTML代码。当中的极其之处是autocomplete属性(那本性子是非标准相当的)。
    它告诉浏览器不要在那么些字段上推行其余活动补全,因为大家将用剧本管理自动补全。与XMLHttp-
    Request一样,就算autocomplete不是其他W3C提出的一局地,不过它赢得了很好的跨浏览器帮忙。
  2. document.getElementById("searchField").onkeyup = searchSuggest;
    为了捕捉和拍卖每一遍击键,须求二个事件管理程序,那是在initAll()中安装的。
  3. xhr.onreadystatechange =setStatesArray;
    xhr.open("GET", "us-states.xml",true);
    xhr.send(null);

4.

if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i  ) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}

我们在此地读取文件,查看各样item节点,寻觅个中的label节点,而且存款和储蓄label的firstChild
(州名本身)。每种州名存款和储蓄在statesArray数组中的一个成分中。

  1. var str = document.getElementById("searchField").value;
    document.getElementById("searchField").className = "";
    当开首在字段中开始展览输入时,就能进行searchSuggest()事件管理程序中的代码。首先获得
    searchField的值,也正是到近期结束已经输入的信息。接下来,清空这一个字段的class属性。

  2. if (str != "") {
    document.getElementById("popups").innerHTML = "";
    如果还并未有输入任何信息,就不做别的交事务,所以在那边展开检讨,确认保证用户已经输入了某些值,
    下一场再弹出大概值的列表。就算已经输入了一些音信,就清空从前的或者值列表。

  3. for (var i=0; i<statesArray.length; i ) {
    var thisState = statesArray[i].nodeValue;
    今日,遍历州名的列表,并且将日前查阅的州名存储在thisState中。
  4. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
    我们期待检查用户到近些日子甘休输入的剧情是或不是有个别州名的一部分——但是单纯那样还远远不足,我们
    还非得确认保障输入的内容位于州名的发端。毕竟,纵然输入了Kansas,你并不愿意下拉框中显示Arkansas
    或Kansas。别的,在进行那项检查时,还在检讨indexOf()以前确定保证八个字符串都以小写的。
    假使indexOf()重返0(也即是说,在thisState的始发地方处找到了输入的字符串),那么大家
    就领会找到了贰个合营。
    9.

    var tempDiv = document.createElement("div"); tempDiv.innerHTML = thisState; tempDiv.onclick = makeChoice; tempDiv.className = "suggestions"; document.getElementById("popups").appendChild(tempDiv);

因为这几个州名是二个可能值,大家目的在于将它增添到要显得的列表中。完毕方式是,创制贰个临时
的div,将它的innerHTML设置为这几个州名,增添onclick管理程序和className,然后将整个div追
加到popups div中。将各样州名作为单身的div加多,那样我们就能够运用JavaScript和CSS操作每
个州名。

  1. var foundCt = document.getElementById("popups").childNodes.length;
    当遍历完全体州名之后,大家要树立弹出窗口——然而大家获得了有一点点个州名呢?这里就总计那
    个值:foundCt。
  2. if (foundCt == 0) {
    document.getElementById("searchField").className = "error";
    }
    要是foundCt是0,就注解用户输入了错误的故事情节。大家将className设置为error,进而让用户
    精通输入错了,这一设置会使输入字段展现浅孔雀绿背景(这由脚本13-17中的CSS样式准则调控)。
    12. 

    if (foundCt == 1) { document.getElementById("searchField").value = document.getElementById ➝("popups").firstChild.innerHTML; document.getElementById("popups").innerHTML = ""; }

如若foundCt是1,大家就领悟找到了唯一的极度,所以能够将以此州名放进字段。如若用户已
经输入了ca,他们就没有供给再输入lifornia,因为大家早已了然了他们要输入哪个州名。我们应用
popups中独一的div填写输入字段,进而自动地提供全部的州名,然后清空popups div。
13.

 function makeChoice(evt) {
if (evt) {
var thisDiv = evt.target;
}
else {

var thisDiv = window.event.srcElement;
}
document.getElementById("searchField").value = thisDiv.innerHTML;
document.getElementById("popups").innerHTML = "";
}

输入州名的另一种艺术是,单击弹出列表中的两个州名。在这种景色下,会调用makeChoice()事
件管理程序。首先,大家透过检查事件的靶子,查明用户单击了哪个州名,那会提供贰个一定的div。
翻开这么些div的innerHTML会提供州名,大家将以此州名放进输入字段。最后,清空或然值的弹出
列表。

PHP - 必需字段

在上一章节我们早就介绍了表的印证准则,我们得以见见"Name", "E-mail", 和 "Gender" 字段是必须的,各字段不能为空。

字段 验证规则
Name 必需。 只能包含字母和空格
E-mail 必需。 必需包含一个有效的电子邮件地址(包含"@"和".")
Website 可选。 如果存在,它必须包含一个有效的URL
Comment 可选。多行字段(文本域)。
Gender 必需。 Must select one

万一在面前的章节中,全体输入字段都以可选的。

在偏下代码中大家参加了有的新的变量: $nameErr, $emailErr, $genderErr, 和 $websiteErr.。那个错误变量将浮未来必得字段上。 我们还为每一种$_POST变量增添了多个if else语句。这一个言辞将检查 $_POST 变量是 否为空(使用php的 empty() 函数)。若是为空,将彰显相应的错误消息。即便不为空,数据将传递给test_input() 函数:

<?php
// 定义变量并默许设为空值
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")
{

 if (empty($_POST["name"]))
    {$nameErr = "Name is required";}
  else
    {$name = test_input($_POST["name"]);}

  if (empty($_POST["email"]))
   {$emailErr = "Email is required";}
  else
    {$email = test_input($_POST["email"]);}

澳门新浦京娱乐场网站:字段类型,必需字段。  if (empty($_POST["website"]))
   {$website = "";}
  else
    {$website = test_input($_POST["website"]);}

  if (empty($_POST["comment"]))
    {$comment = "";}
  else
    {$comment = test_input($_POST["comment"]);}

  if (empty($_POST["gender"]))
    {$genderErr = "Gender is required";}
  else
   {$gender = test_input($_POST["gender"]);}
}
?>

 


PHP - 必需字段

在上一章节我们早已介绍了表的表明法规,大家得以见见"Name", "E-mail", 和 "Gender" 字段是必须的,各字段不能够为空。

字段 验证规则
Name 必需。 只能包含字母和空格
E-mail 必需。 必需包含一个有效的电子邮件地址(包含"@"和".")
Website 可选。 如果存在,它必须包含一个有效的URL
Comment 可选。多行字段(文本域)。
Gender 必需。 Must select one

如果在前面的章节中,全部输入字段都以可选的。

在偏下代码中大家参加了部分新的变量: $nameErr, $emailErr, $genderErr, 和 $websiteErr.。这一个错误变量将展现在必得字段上。 大家还为各个$_POST变量增添了多少个if else语句。这一个言辞将检查 $_POST 变量是 否为空(使用php的 empty() 函数)。要是为空,将呈现相应的错误消息。假若不为空,数据将传递给test_input() 函数:

<?php
// 定义变量并暗许设为空值
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")
{

 if (empty($_POST["name"]))
    {$nameErr = "Name is required";}
  else
    {$name = test_input($_POST["name"]);}

  if (empty($_POST["email"]))
   {$emailErr = "Email is required";}
  else
    {$email = test_input($_POST["email"]);}

  if (empty($_POST["website"]))
   {$website = "";}
  else
    {$website = test_input($_POST["website"]);}

  if (empty($_POST["comment"]))
    {$comment = "";}
  else
    {$comment = test_input($_POST["comment"]);}

  if (empty($_POST["gender"]))
    {$genderErr = "Gender is required";}
  else
   {$gender = test_input($_POST["gender"]);}
}
?>

 


<span style="color:red;font-weight:bold;">
下文陈述-采纳sql脚本获取钦命表中全数列对应的申明音信,
本子如下所示:
</span>  

ajax对于google自动补全制作的难点

电动补全不应有是以回车以往来推断 应该是经过你按下键的时候就起来判断当你输入中文的时候 你打拼音字是不会打到文本框中的 那时候那个事件还尚无触发 所以不是透过回车来剖断 还应该有自动补全每输入贰个字符就能够发送三遍央求在发送央浼从前应当把在此之前的文本框清空 还要判定一下退格键 按下退格键应该让活动补全消失  

PHP - 展现错误音信

在以下的HTML实例表单中,我们为每一种字段中增添了部分剧本,种种脚本会在新闻输入错误时展现错误音讯。(若是用户未填写音讯就交付表单则会输出错误消息):

PHP - 呈现错误消息

在偏下的HTML实例表单中,我们为各样字段中增添了部分本子,各种脚本会在新闻输入错误时突显错误音讯。(假设用户未填写音讯就交由表单则会输出错误音讯):

SELECT
(case when a.colorder=1 then d.name else '' end) [数据表名称],
a.colorder [列顺序],
a.name [列名称],
b.name as [列类型],
b.length as [列长度],
g.[value] AS [列说明信息]
FROM syscolumns a left join systypes b
on a.xtype=b.xusertype
inner join sysobjects d
on a.id=d.id and d.xtype='U' and d.name<>'dtproperties'
left join sys.extended_properties g
on a.id=g.major_id AND a.colid = g.minor_id 
WHERE d.[name] ='IError'--数据表名称
order by a.id,a.colorder

ajax 自动补全功能够

您的输入框一定是个<input> 吧,input有个onchange事件,文本框里的value更换的时候就能够触发onchange事件,你在这些事件里写三个办法,拿ajax去后台查  

源代码: 脚本一: !DOCTYPE htmlhtmlheadtitleAuto-fill Form Fields/titlelink rel="stylesheet"href="script06.cs...

实例

澳门新浦京娱乐场网站,<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
<label>Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender"  value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">

</form>

运营实例 »

实例

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
<label>Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender"  value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">

</form>

运行实例 »

澳门新浦京娱乐场网站 1

本文由澳门新浦京娱乐场网站发布于数据库,转载请注明出处:澳门新浦京娱乐场网站:字段类型,必需字段