开发者新闻：jQuery：表单验证+圆角+列表项

发布者: kaotik于 2009/8/26 16:00:00 阅读次数 23660
本教程将教授您以下 4 个要点

* 如何应用圆角

* 表单验证

* 将变量传递到列表中

* 自定义 jQuery 插件

首先前往 google code (http://code.google.com/p/jqueryxoops/downloads/list) 下载教程 12. 这个压缩包包含所有需要的文件。它们来自我的上一个教程。


第 1 部分 - 圆角

让我们从圆角开始。打开 test.php 并替换所有代码为以下内容
<style type="text/css">
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:200px; height:70px;}
style>

<script type="text/javascript" src="firebug.js">
<script language="javascript" src="jquery-1.3.2.min.js">
<script language="javascript" src="jquery.corner.js">

<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript

$('#myformDiv').corner();  // Rounds corners of selected div. In this example "myformDiv"

    $("#subBut").click(function(event) {
        var formContent = $("#form1").serialize();
        $("#box").load('myserv.php',formContent);
    });
});
script>

<div id="myformDiv">
<form name="form1" id="form1" method="post" action="">
<label>Name
  <input type="text" name="textfield" id="textfield">
  label>
  <input type="button" name="subBut" id="subBut" value="Submit">
form>
div>
<br />

<div id="box">Ajax calldiv>


以下是变更内容
第 2 行 - 我创建了一个新的 ID 样式 "myformDiv"，给它设置了背景色、宽度和高度
第 8-19 行 - 加载我们的圆角插件。
第 13-15 行 - 这是设置圆角的地方。我已经将 jquery 插件 "corners" 绑定到选择器 myformDiv。您会注意到空的括号。您可以设置圆角的半径，甚至可以指定要圆形角的位置。可以是 1、2、3 或所有 4 个角（本例中）。
第 20-22 行 - 我在我的表单周围创建了一个 div。这就是要圆形的。

很简单吧？让我们继续。

第 2 部分 - 验证

表单验证是用 JavaScript 完成的事情之一。为什么还要回到服务器去检查用户是否填写了所有所需字段？现在，为了让表单验证也通过 Ajax 进行，我们必须将两者结合起来。用以下代码替换 test.php 中的所有代码
<style type="text/css">
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:300px; height:170px;}
.error-highlight {border: 2px solid #f00;}
.errMissFld {color: #f00;}
style>

<script type="text/javascript" src="firebug.js">
<script language="javascript" src="jquery-1.3.2.min.js">
<script language="javascript" src="jquery.corner.js">
<script language="javascript" src="jquery.validation.js">

<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript

$('#myformDiv').corner();  // Rounds corners of selected div. In this example "myformDiv"

 $('#form1').bind('submit', function() {
    tst= $(this).validation(); 
    if(tst==false){return tst;}
        var formContent = $("#form1").serialize();
        $("#box").load('myserv.php',formContent);
        return false;
    });
});
script>

<div id="myformDiv">
<form name="form1" id="form1" method="post" action="">
<p class="required-field">
<label>Name
  <input type="text" name="name" id="name">
  label>
  p>
  <p class="required-field">
<label>Name
  <input type="text" name="address" id="address">
  label>
  p>

  <input type="submit" name="subBut" id="subBut" value="Submit">
form>
      <div class="errMissFld">
      
      div>

div>
<br />

<div id="box">Ajax calldiv>


第 4 行 - 将为任何未填写所需表的表单元素创建红色边框
第 5 行 - 使错误信息变红
第 20-23 行 - 我根据我的上一个实例进行了轻微的修改。为了使 Ajax 和验证能够很好地协同工作，我现在正在绑定表单 "form1" 的提交按钮。
第 24 行 - 它将在表单 "form1" 内部执行验证所有元素。
第 25-28 行 - 如果验证失败，这意味着所需字段为空，则将停止执行此点之后的任何代码并返回。如果验证有效，则将继续处理此函数内的剩余代码。
第 35-39 行 - 我将对所需字段进行包装的元素（可以是 div 等）用 class 为 "required-field" 的元素包裹。

请注意，这不是原始的 jquery.validation 插件。它已被我修改，以满足这种方式。

打开 myserv.php 并用以下代码替换所有代码

echo "hello world! My name is " . $_GET['name'];
?>


由于我现在使用2个文本字段，我已经给它们取了不同的名字，所以myserv.php中有所变化。接下来。

第三部分 - 传递变量

现在我们将创建一个允许用户点击并通过Ajax将信息传递到服务器的文本列表。与PHP相比，使用JavaScript的优点之一是我们可以利用HTML代码，这是什么意思？打开test.php并替换所有代码为以下内容

//假设我有很多选择，我会用这个来列出。
$vals=array();
for ($i = 1; $i <= 6; $i++) {
    $vals[$i]['id']=$i;
    $vals[$i]['name']='Radio Station Name:'.$i;
}

?>


#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:300px; height:170px;}
.error-highlight {border: 2px solid #f00;}
.errMissFld {color: #f00;}








$(document).ready(function() { //页面加载完成后再处理JavaScript代码

$('#myformDiv').corner();                                                                    //为所选div四角加圆角。在这个例子中是"myformDiv"

 $('#form1').bind('submit', function() {    
    tst= $(this).validation(); 
    if(tst==false){return tst;}
        var formContent = $("#form1").serialize();
        $("#box").load('myserv.php',formContent);
        return false;
    });
    
    $(".mylink").bind("click", function() {    
    var hol=$(this).attr('myval');
    var formContent ="action=radio&link="+hol;
    $("#box").load('myserv.php',formContent);
    });
    
});