使用引导验证器验证表单字段是不是仅包含字母

Posted 2023-05-08

【中文标题】使用引导验证器验证表单字段是不是仅包含字母

【英文标题】：validate form field for containing only letters using bootstrap validator使用引导验证器验证表单字段是否仅包含字母

【发布时间】：2017-11-12 10:07:22

【问题描述】：

这是我第一次使用引导程序来验证表单字段，我正在学习如何通过以下方式进行操作contact form validation example 在以下链接中。

幸运的是，经过一段时间后，我在提供的链接中找到了示例，运行良好。

现在我想知道如何验证“名称”字段是否只包含字母。

基于下面代码sn-p中的validators:对象...

$(document).ready(function()
    $('#form_id').bootstrapValidator(
        feedbackIcons: 
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        ,
        fields:
            first_name:
                validators:
                        stringLength: 
                        min: 2,
                    ,
                        notEmpty: 
                        message: 'Please supply your first name'
                    
                
            
        
    )
);

在引导程序中是否有类似的东西可以进行此类验证？

【问题讨论】：

我的回答有用吗？

@hasan，感谢您的回答，我想这是一个很好的答案。我在codepen.io/hasanB/pen/gRrOQm 尝试了您的代码，它运行良好，这正是我想要做的。但是在我的项目中它的工作方式不同。让我找出问题所在，我会告诉你的。

【参考方案1】：

你可以使用它。工作这个codepen 我只为名字字段添加了回调，您还可以在引导验证中使用回调来满足其他自定义需求。

详细参考：http://formvalidation.io/validators/callback/

function isValid(value)

  var fieldNum = /^[a-z]+$/i;

  if ((value.match(fieldNum))) 
      return true
  
  else
  
      return false
  

如果用户输入不符合字母的内容，则会触发消息。

first_name: 
                validators: 
                        stringLength: 
                        min: 2,
                    ,
                        notEmpty: 
                        message: 'Please supply your first name'
                    ,
                    callback: 
                        message: 'please enter only letters',
                        callback: function(value, validator, $field) 
                            if (!isValid(value)) 
                              return 
                                valid: false,
                              ;
                            
                            else
                            
                              return 
                                valid: true,
                              ;    
                            

                        
                    
                

       

【讨论】：

我在浏览器的控制台中收到此错误。 heypasteit.com/clip/0IIMGO

我实际上是从在线编辑器中复制了您的代码。对不起，不知道我是否需要修改其他内容。好吧，我想我应该在使用 bootstrap 之前开始学习 javascript 或 jquery。你能告诉我，我需要修改什么吗？

只是将代码从编辑器复制到您的项目可能会出现问题，您应该根据需要编辑代码

你可以用你的代码创建codepen或jsfiddle，然后也许我可以检测到错误

codepen.io/sandoval0992/pen/qjZbmN 看看这个，这正是我在我的项目中得到的，谢谢你的帮助。