我有两个独立的功能，使用2个不同的按钮，但我想将它们放在一起，以便在一个按钮下同时触发这两个功能。
我有一个用户注册表单，我有一个函数将数据发送到数据库，另一个函数检查用户名是否存在。
我需要的是，当用户提交表单时，如果用户名已经存在，则不应提交表单，因此应显示警告，例如“使用的用户名，请尝试另一个”。但是，如果尚未使用用户名，请提交表单。
是否有人可以了解我如何解决这个问题，并将这两个功能放在同一个按钮上？
注册功能 -
function registerUser() {
var Username = document.getElementById("txtusername").value;
var Firstname = document.getElementById("txtfirstname").value;
var Lastname = document.getElementById("txtlastname").value;
var Email = document.getElementById("txtemail").value;
var Password = document.getElementById("txtpassword").value;
var Confirmpass = document.getElementById("passwordconfirm").value;
db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
db.transaction(function(tx) {
NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass);
}, errorRegistration, successRegistration);
}
function NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass) {
var _Query = ("INSERT INTO SoccerEarth(UserName, FirstName, LastName, Email, Password, CPass) values ('"+ Username +"','"+ Firstname +"','"+ Lastname +"','"+ Email +"', '"+ Password +"', '"+ Confirmpass +"')");
alert(_Query);
tx.executeSql(_Query);
}
function errorRegistration(error) {
navigator.notification.alert(error, null, "Got an error mate", "cool");
}
function successRegistration() {
navigator.notification.alert("User data has been registered", null, "Information", "ok");
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
}
检查数据库功能中的用户名 -
function CheckUser()
{
db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
db.transaction(UserDB, errorCB);
}
function UserDB(tx)
{
alert("user check");
var User = document.getElementById("txtusername").value;
tx.executeSql("SELECT * FROM SoccerEarth WHERE UserName='" + User + "'", [], renderUser);
}
function renderUser(tx,results) {
if (results.rows.length > 0) {
navigator.notification.alert("Username is taken, please try again.");
}
else
{
navigator.notification.alert("Username available!");
}
HTML -
<form id="form1" data-ajax="false">
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
</div>
<div data-role="fieldcontainer">
<label for="txtfirstname" data-theme="d">First Name:</label>
<input type="text" id="txtfirstname" name="txtfirstname" placeholder="Enter First Name"/>
</div>
<div data-role="fieldcontainer">
<label for="txtlastname" data-theme="d">Last Name:</label>
<input type="text" id="txtlastname" name="txtlastname" placeholder="Enter Last Name"/>
</div>
<div data-role="fieldcontainer">
<label for="txtemail" data-theme="d">Email:</label>
<input type="email" id="txtemail" name="txtemail" placeholder="Enter Enter Email"/>
</div>
<div data-role="fieldcontainer">
<label for="txtpassword" data-theme="d">Password:</label>
<input type="text" id="txtpassword" name="txtpassword" maxlength="12" placeholder="Enter Password"/>
</div>
<div data-role="fieldcontainer">
<label for="passwordconfirm" data-theme="d">Confirm Password:</label>
<input type="text" id="passwordconfirm" name="passwordconfirm" maxlength="12" placeholder="Confirm password"/>
</div>
<br>
<input type="submit" value="Register User">
输入验证（JQUERY） -
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
registerUser(form);
return false;
}
});
答案 0 :(得分：2)
我可以在您的代码中看到您检查用户名是否可用，因此您可以使用事件onchange
<input type="text" onchange="CheckUser()" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
所以当用户写一些你的函数时CheckUser（）被激活，之后你就可以正常使用了，
if (results.rows.length > 0) {
navigator.notification.alert("Username is taken, please try again.");
} else {
//add event click only if is available your username
navigator.notification.alert("Username available!");
element = document.getElementById("btnSend");
element.addEventListener("click", registerUser())
}
并使用此ID btnSend
编写您的输入提交<input id="btnSend" type="submit" value="Register User">
因此，通过这种方式，您可以验证用户名是否只有在这种情况下您可以为提交添加RegisterUser（）
最后但并非最不重要的是要小心，因为你在JS（查询数据库）中编写了代码，这可能会影响你的安全性
答案 1 :(得分：1)
创建调用这2个函数的新函数
function newfunction()
{
// you need to return true/false from check user function
if(CheckUser())
{
registerUser();
}
}
并在 onclick
上调用此方法<input type="submit" value="Register User" onclick="newfunction()">
答案 2 :(得分：1)
使用onsubmit事件来处理注册
<form id="form1" data-ajax="false" onsubmit="doSubmit();">
和javascript函数看起来像
function doSubmit(){
// check if the user exists. Return a boolean value to return the status
var userExists = checkUser();
// if user exists, return false to protect form from submitting.
if(userExists){
return false;
}
// if user does not exists, register the user
registerUser();
}