Question

有人能够向我展示如何验证此输入字段吗？在检查验证之前，将禁用“提交”按钮。非常感谢，任何帮助我开始的帮助都非常感谢。这是我的代码：

 <style>
     .textinput {

        border: 1px solid #000;
        border-radius: 0;
        box-sizing: border-box;
        color: #6c6c6c;
        height: auto;
        margin: 0px auto 15px auto;
        padding: 4px 0 5px 10px;
        width: 100%;
        font-family: Apercuregular,sans-serif;
        font-weight: normal;
        letter-spacing: .02em;
        font-size: 16px;
        display: block;
         width: 300px;
 }

 .form-button{
  background-color: #000;
  color: #fff;
  display: block;
  letter-spacing: .02em;
  font-family: Apercuregular,sans-serif;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1.2em 2em 1.2em 2em;
  width: 275px;
  margin: 25px auto 25px auto;
  border: 1px solid #000;
  outline: none;
  }
 .form-button[disabled],
 .form-button[disabled]:hover {
    background-color: #d1d3d4;
    color: #fff;
    border: 0 none;
 }

 .form-button:focus,
 .form-button:hover{
  background:#f3f3f3;
  color:#000;
  border: 1px solid #f3f3f3;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
 }

 .fieldLabel {
  display: block;
  font-size: 13px;
  font-family: Apercuregular,sans-serif;
  letter-spacing: .02em;
  text-align: left;
  width: 100%;
  line-height: 17px;
 }

 input[type="checkbox"]{
 display: none;
 }


 input[type="email"]  {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 }

 </style>

           <div id="container_COLUMN1">
                <input type="text" name="First Name" id="control_COLUMN1" label="First Name" class="textinput mandatory" placeholder="First name*" required labeltext="First name*" maxlength="50" mandatory="true">
            </div>




            <div>
              <button type="submit" class="defaultText form-button" id="submitBtn" value="Enter Now">Enter Now</button>
            </div>

Answer 1

这取决于您正在寻找什么样的验证。由于它是一个名称字段，我将假设您要确保它不是空白且仅包含字母。

要使用jQuery实现这一点，您可以使用以下内容：

var reg = /^[a-z]+$/i;
var name = $('#control_COLUMN1').val();

if(name != '' && reg.test(name)) {
  //name is valid
} else {
  //name is invalid
}

Answer 2

像这样的东西。我不知道这是否是最好的方式

// get the text 
var inputText =document.getElementById("control_COLUMN1").value;

// do controls

if(controls){
    document.getElementById("submitBtn").hidden=false;
}else{
    document.getElementById("submitBtn").hidden=true;
}

Answer 3

您可以在字段中查找更改/密钥，然后获取值以验证它不是0，然后添加/删除按钮的已禁用属性。

$("#control_COLUMN1").keyup(function(event) {
 var fieldValue = event.target.value;
 if (fieldValue == 0) {
  $("#submitBtn").attr("disabled", "disabled");
 } else {
  $("#submitBtn").removeAttr("disabled", "disabled");
 }    
});

Codepin

表单验证JS - 验证名字输入字段

3 个答案: