最近在做一个小网站的项目,有一个小问题,可能在有经验的前端er面前不是什么问题,但是由于我接触前端很少,所以这个问题也搞了好一会才解决

在一个页面里有两个表单,在各自点击提交时,先要对相应的input里做非空校验,然后再对里面的数据做下简单的字符串判断

html里是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<tbody>
<tr>
<td class="sync"><a class="btn btn-success" href="/syncfile?redo=1&systype=x86">32位同步其他组文件</a></td>
<td class="update"><a class="btn btn-success" href="/selfupdate?redo=1&systype=x86" >32位急救箱自升级文件</a></td>
<td class="twice">
<form class="form-inline" action="/check2" method="GET">
<input type="hidden" name="type" value="zip" />
<input type="hidden" name="redo" value=1 />
<input type="text" class="form-control sftppath" name="sftppath" placeholder="请输入急救箱捆包地址">
<button type="submit" class="btn btn-primary">急救箱捆包二次</button>
</form>
</td>
</tr>
<tr>
<td class="sync"><a class="btn btn-success" href="/syncfile?redo=1&systype=x64">64位同步其他组文件</a></td>
<td class="update"><a class="btn btn-success" href="/selfupdate?redo=1&systype=x64" >64位急救箱自升级文件</a></td>
<td class="twice">
<form class="form-inline" action="/check2" method="GET">
<input type="hidden" name="type" value="update" />
<input type="hidden" name="redo" value=1 />
<input type="text" class="form-control sftppath" name="sftppath" placeholder="请输入急救箱升级地址">
<button type="submit" class="btn btn-primary" id="123">急救箱升级二次</button>
</form>
</td>
</tr>
</tbody>

 

起初我只是简单的用jquery做下非空校验

1
2
3
4
$("form").submit(function(){
if($("input.sftppath").val()==''){
alert("sftp不能为空");
}

这样写,在点击第一个按钮(急救箱捆包二次)时,当前面的input里没有写数据的时候会有alert提示,

但是点击第二个按钮(急救箱升级二次)时,即使在前面的input里填写上数据也会有alert提示,因为在急救箱捆包二次那的input里没有值。

于是在网上找了一下,没有使用第三方的jquery插件,因为这个功能太小了。

我先打印了一个$(this).html()

$(“form”).submit(function(){

alert($(this).html())

})

在submit里,$(this)所指的节点是form的根节点

于是这里就好弄了

使用$(this).children(“input.sftppath”).val()来获得相应form中的sftppath的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$("form").submit(function(){
if($(this).children("input.sftppath").val() == ''){
alert("sftp路径不能为空");
return false;
}else{
var buttontext = $(this).children('button.btn-primary').text();
var sftppath = $(this).children("input.sftppath").val();
if (buttontext == "急救箱升级二次"){
if(sftppath.indexOf('-all')==-1){
alert("不是有效的升级sftp路径");
return false;
}else{
return true;
};
}else if (buttontext == "急救箱捆包二次"){
if(sftppath.indexOf('-zip') == -1){
alert("不是有效的捆包sftp路径");
return false;
}else{
return true;
};
};
};

});

其实这里也就是明白了在submit函数里,$(this)指的是form的根节点,而不是那个button节点。