Question

请检查此code

这是一个包含3个文本输入，2个单选按钮和一个选择输入的表单。

我编写了一个js函数，如果所有三个文本输入都不为空且所选选项不是第一个选项，则显示警告，否则该函数不显示任何内容。

但是，无论选择输入如何，如果文本输入不为空，它都会显示警告。

Answer 1

我不确定你为什么试图乘以布尔值。您可以检查.value属性并使用或运算符||

if (!F.nom.value || !F.mail.value || !F.age.value || !F.prof.selectedIndex)
   alert('form has empty fields');
else 
   alert("ok")

在JavaScript中，任何空字符串，undefined，null或0的计算结果为false，因此您只需检查该值，即

if (formElement.value)

如果值不是空字符串，未定义，null或0，

将评估为true。

Answer 2

希望你能从中学到一些东西：

＆＃13;

//<![CDATA[
/* external.js */
var doc, bod, E, old = onload; // for use on other loads
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
E('frm').onsubmit = function(){
  return false;
}
var nom = E('nom'), mail = E('mail'), age = E('age'), m = E('m'), f = E('f');
var prof = E('prof'), out = E('out');
E('env').onclick = function(){
  if(age.value !== '' && mail.value !== '' && age.value !== '' && (m.checked || f.checked) && prof.value !== '0'){
    out.innerHTML = 'A very basic Client-side check for empty values was performed.';
  }
  else{
    out.innerHTML = 'The form was not completed.';
  }
}
}
//]]>

＆＃13;

/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#000; overflow-y:scroll;
}
.main{
  width:936px; background:#ccc; padding:20px; margin:0 auto;
}
table{
 width:300px;
}
thead th{
  font-size:24px;
}
tfoot{
  text-align:center;
}
tbody th{
  text-align:right;
}

＆＃13;

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Exo 9</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <form name='frm' id='frm'>
      <table>
        <thead><tr><th colspan='2'>Exo 9</th></tr></thead>
        <tfoot>
          <tr>
            <td colspan='2'>
              <input id='env' name='env' type='button' value='Envoyer' />
              <input id='reset' name='reset' type='reset' value='Annuler' />
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <th>Nom:</th>
            <td><input id='nom' name='nom' type='text' /></td>
          </tr>
          <tr>
            <th>Email:</th>
              <td><input id='mail' name='mail' type='text'></td>
          </tr>
          <tr>
            <th>Age:</th>
            <td><input id='age' name='age' type='text' /></td>
          </tr>
          <tr>
            <th>Sexe:</th>
            <td>
              <input id='m' name='sexe' type='radio' value='m' /><label for='m'>M</label>
              <input id='f' name='sexe' type='radio' /><label for='f'>F</label>
            </td>
          </tr>
          <tr>
            <th>Profession:</th>
            <td>
              <select id='prof' name='prof'>
                <option value='0' disabled='disabled' selected='selected'> -- choisir un option -- </option>
                <option value='Médecin'>Médecin</option>
                <option value='Ingénieur'>Ingénieur</option>
                <option value='Professeur'>Professeur</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
    <div id='out'></div>
  </div>
</body>
</html>

＆＃13;

外部JavaScript和CSS被缓存到浏览器的内存中，以便更快地进行后续加载（直到客户端清除其缓存）。如果要更改CSS JavaScript，请记住这一点。您可能必须清除缓存。在实际网站上，您需要将网址更改为您知道不会被缓存的网址。

使用布尔乘法形式的valdiation不起作用

2 个答案: